/* ========================================================================
   DESIGN TOKENS
======================================================================== */
:root[data-theme="dark"] {
  --ink:          #06080D;
  --raised:       #0C1018;
  --inset:        #121824;
  --veil:         rgba(6, 8, 13, 0.88);
  --pill:         rgba(8, 11, 18, 0.92);
  --text:         #F6F8FB;
  --text-sub:     #9CA8BA;
  --hair:         rgba(255, 255, 255, 0.08);
  --hair-strong:  rgba(255, 255, 255, 0.16);
  --control:      rgba(255, 255, 255, 0.06);
  --shadow:       0 20px 48px rgba(0, 0, 0, 0.65);
  --footer:       #030508;
}
:root[data-theme="light"] {
  --ink:          #F8FAFC;
  --raised:       #FFFFFF;
  --inset:        #EFF2F7;
  --veil:         rgba(248, 250, 252, 0.92);
  --pill:         rgba(255, 255, 255, 0.94);
  --text:         #090D15;
  --text-sub:     #526077;
  --hair:         rgba(9, 13, 21, 0.1);
  --hair-strong:  rgba(9, 13, 21, 0.18);
  --control:      rgba(9, 13, 21, 0.05);
  --shadow:       0 20px 44px rgba(9, 13, 21, 0.08);
  --footer:       #070A10;
}
:root {
  --gold:       #E5A118;
  --gold-lift:  #F7CE68;
  --gold-deep:  #B87A07;
  --gold-hair:  rgba(229, 161, 24, 0.35);
  --gold-wash:  rgba(229, 161, 24, 0.12);
  --live:       #10B981;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Plus Jakarta Sans', system-ui, sans-serif;

  --shell: 1260px;
  --gut: clamp(18px, 4vw, 32px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.zf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 3100;
  background: var(--gold); color: #000; font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 10px 0;
}
.zf-skip:focus { left: 0; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }

/* Typography */
.t-display {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 4.8vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.t-h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.024em;
}
.t-h3 { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.32; }
.t-lede { font-size: clamp(15px, 1.35vw, 17px); color: var(--text-sub); line-height: 1.7; max-width: 62ch; }
.t-data { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.01em; }

.band { padding-block: clamp(64px, 8vw, 108px); }
.band--tight { padding-block: clamp(40px, 5vw, 68px); }

.band-mark {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
}
.band-mark::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-hair), transparent); }

/* ========================================================================
   ANIMATIONS & SCROLL REVEAL SYSTEM
======================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-group.is-revealed > *:nth-child(1) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.reveal-group.is-revealed > *:nth-child(2) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.reveal-group.is-revealed > *:nth-child(3) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.reveal-group.is-revealed > *:nth-child(4) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.reveal-group.is-revealed > *:nth-child(5) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.reveal-group.is-revealed > *:nth-child(6) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }

/* ========================================================================
   PRELOADER
======================================================================== */
.zf-preloader {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; background: var(--ink);
  transition: opacity .5s ease, visibility .5s ease;
}
.zf-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.zf-pl-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zf-pl-mark img { height: 44px; width: auto; }
.zf-pl-word {
  font-family: var(--display); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.25em; color: var(--text-sub); text-transform: uppercase;
}
.zf-pl-bar { width: 200px; height: 2px; background: var(--hair); position: relative; overflow: hidden; border-radius: 2px; }
.zf-pl-bar span { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--gold); transition: width .35s cubic-bezier(0.16, 1, 0.3, 1); }

/* ========================================================================
   HEADER & TICKER
======================================================================== */
.zf-strip {
  border-bottom: 1px solid var(--hair);
  background: var(--raised);
  overflow: hidden;
  padding-block: 8px;
}
.zf-strip-track {
  display: flex; width: max-content; animation: marquee 34s linear infinite;
}
.zf-strip-run {
  display: flex; align-items: center; gap: 36px; padding-right: 36px;
  font-size: 12px; color: var(--text-sub); white-space: nowrap;
}
.zf-strip-run b { color: var(--text); font-family: var(--display); font-weight: 600; }
.zf-strip-run i { color: var(--gold-hair); font-style: normal; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.zf-strip:hover .zf-strip-track { animation-play-state: paused; }

.zf-header {
  position: fixed; top: 48px; left: 0; width: 100%; z-index: 1000;
  pointer-events: none; display: flex; flex-direction: column; align-items: center;
  padding-inline: 16px; transition: top .34s cubic-bezier(.16, 1, .3, 1);
}
.zf-header.is-stuck { top: 12px; }

.zf-bar {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 14px;
  width: fit-content; max-width: calc(100% - 20px);
  padding: 6px 10px 6px 18px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  transition: background .34s ease, border-color .34s ease, box-shadow .34s ease, backdrop-filter .34s ease;
}
.zf-header.is-stuck .zf-bar {
  background: var(--pill); border-color: var(--gold-hair); box-shadow: var(--shadow);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

.zf-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.zf-logo img { height: 30px; width: auto; object-fit: contain; }
.zf-logo-alt { display: none; align-items: center; gap: 8px; }
.zf-logo-badge {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--gold); color: #000; border-radius: 7px;
  font-family: var(--display); font-weight: 800; font-size: 13px;
}
.zf-logo-word { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; color: var(--text); }

.zf-rule { width: 1px; height: 18px; background: var(--hair); flex-shrink: 0; }

.zf-nav { display: flex; align-items: center; gap: 4px; }
.zf-nav a {
  position: relative; padding: 7px 13px; font-size: 13.5px; font-weight: 500;
  color: var(--text-sub); white-space: nowrap; border-radius: 8px; transition: color .2s ease;
}
.zf-nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.zf-nav a:not([aria-current="page"]):hover { color: var(--text); }
.zf-nav a:not([aria-current="page"]):hover::after { transform: scaleX(1); }
.zf-nav a[aria-current="page"] { color: var(--gold); font-weight: 600; }
.zf-nav a[aria-current="page"]::after { transform: scaleX(1); }

.zf-icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--hair); background: var(--control); color: var(--text);
  font-size: 13px; cursor: pointer; flex-shrink: 0; transition: border-color .2s ease, color .2s ease;
}
.zf-icon-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Global Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-weight: 700; font-size: 13.5px;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: #000; box-shadow: 0 4px 18px rgba(229, 161, 24, 0.25); }
.btn--gold:hover { background: var(--gold-lift); color: #000; box-shadow: 0 6px 24px rgba(229, 161, 24, 0.4); }
.btn--line { border-color: var(--hair-strong); color: var(--text); background: transparent; }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }
.btn--sm { padding: 9px 19px; font-size: 12.5px; }

/* Mobile Menu */
.zf-burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 34px; padding: 7px; background: transparent; border: none; cursor: pointer;
}
.zf-burger span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.zf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.zf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.zf-drawer {
  pointer-events: auto; display: none; flex-direction: column; gap: 3px;
  width: min(310px, calc(100vw - 32px)); margin-top: 10px; padding: 14px;
  border-radius: 20px; background: var(--pill); border: 1px solid var(--gold-hair);
  box-shadow: var(--shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.zf-drawer.is-open { display: flex; }
.zf-drawer a { padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-sub); }
.zf-drawer a:hover { background: var(--gold-wash); color: var(--gold); }
.zf-drawer a[aria-current="page"] { color: var(--gold); font-weight: 600; }

@media (max-width: 900px) {
  .zf-nav, .zf-rule, .zf-bar > .btn { display: none !important; }
  .zf-burger { display: flex; }
}

/* ========================================================================
   UNIFIED HERO SYSTEM (HOME, ABOUT, SERVICES)
======================================================================== */
.hero-center-standard,
.svc-hero-clean {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-top: clamp(130px, 13vw, 160px);
  padding-bottom: clamp(60px, 7vw, 90px);
  background-color: #06090F;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Page Background Variants */
.hero-center--home {
  background-image: 
    radial-gradient(ellipse 90% 65% at 50% 45%, rgba(6, 9, 15, 0.15) 0%, #06090F 95%),
    linear-gradient(180deg, rgba(6, 9, 15, 0.75) 0%, rgba(6, 9, 15, 0.45) 60%, #06090F 100%),
    url('../img/hero.png');
}

.hero-center--about {
  background-image: 
    radial-gradient(ellipse 90% 65% at 50% 45%, rgba(6, 9, 15, 0.15) 0%, #06090F 95%),
    linear-gradient(180deg, rgba(6, 9, 15, 0.82) 0%, rgba(6, 9, 15, 0.5) 60%, #06090F 100%),
    url('../img/bg2.png');
}

.hero-center--services,
.svc-hero-clean {
  background-image: 
    radial-gradient(ellipse 90% 65% at 50% 45%, rgba(6, 9, 15, 0.15) 0%, #06090F 95%),
    linear-gradient(180deg, rgba(6, 9, 15, 0.85) 0%, rgba(6, 9, 15, 0.5) 60%, #06090F 100%),
    url('../img/bg3.png');
}

/* Title Box */
.hero-center-titlebox,
.svc-hero-titlebox {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 48px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold) !important;
  background: rgba(229, 161, 24, 0.08);
  border: 1px solid var(--gold-hair);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.hero-center-titlebox h1,
.svc-hero-titlebox h1 {
  color: #FFFFFF !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.9);
  margin-bottom: 22px;
}
.hero-center-titlebox h1 span.gold-highlight,
.svc-hero-titlebox h1 span.gold-highlight {
  color: var(--gold) !important;
  position: relative;
  display: inline-block;
}
.hero-center-titlebox h1 span.gold-highlight::after,
.svc-hero-titlebox h1 span.gold-highlight::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
}
.hero-center-titlebox .t-lede,
.svc-hero-titlebox .t-lede {
  color: #D1D8E3 !important;
  margin: 0 auto 32px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

.hero-center-actions,
.svc-hero-quickcta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 3-Column Metric Console Deck (Home & About) */
.hero-metric-deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
}
.hero-metric-card {
  background: rgba(12, 16, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 26px 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.hero-metric-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-hair);
  box-shadow: 0 20px 44px rgba(229, 161, 24, 0.15);
}
.hm-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.hero-metric-card h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.hero-metric-card p {
  font-size: 13px;
  color: #9CA8BA;
  line-height: 1.6;
  margin-bottom: 16px;
}
.hm-stat {
  border-top: 1px solid var(--hair);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hm-stat span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
}
.hm-stat b {
  font-family: var(--display);
  font-size: 15px;
  color: var(--gold);
}

/* 4-Quadrant Scope Console Cards (Services Page Hero) */
.svc-quad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
}
.svc-quad-card {
  background: rgba(12, 16, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.svc-quad-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-hair);
  box-shadow: 0 20px 44px rgba(229, 161, 24, 0.15);
}
.quad-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.quad-num {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
}
.quad-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-wash);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 16px;
}
.svc-quad-card h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  line-height: 1.3;
}
.svc-quad-card p {
  font-size: 12.5px;
  color: #9CA8BA;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}
.quad-stat {
  border-top: 1px solid var(--hair);
  padding-top: 14px;
}
.quad-stat span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  margin-bottom: 2px;
}
.quad-stat b {
  font-family: var(--display);
  font-size: 12.5px;
  color: var(--gold);
}

/* ========================================================================
   ANIMATED CREDENTIALS / BENCHMARKS TICKER
======================================================================== */
.credentials-ticker {
  background: var(--raised);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  padding-block: 14px;
  position: relative;
}

.credentials-ticker::before,
.credentials-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.credentials-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink), transparent);
}
.credentials-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, var(--ink), transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerSlide 28s linear infinite;
}

.ticker-run {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-size: 13px;
  color: var(--text-sub);
  white-space: nowrap;
}

.ticker-run b {
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
  margin-right: 6px;
}

.ticker-run i {
  color: var(--gold);
  font-style: normal;
  font-size: 14px;
}

.credentials-ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes tickerSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Static fallback / Credentials Strip for other pages */
.credentials {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--raised);
}
.cred-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-block: 22px;
  font-size: 13px;
  color: var(--text-sub);
}
.cred-row span b {
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  margin-right: 6px;
}

/* ========================================================================
   ABOUT OVERVIEW & SPEC SCHEDULE (HOMEPAGE)
======================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.about-copy p + p { margin-top: 16px; }
.about-copy .btn { margin-top: 28px; }

.spec-table { border-top: 1px solid var(--hair); }
.spec-row {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: 20px; padding: 20px 2px; border-bottom: 1px solid var(--hair);
}
.spec-row dt {
  font-family: var(--display); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -0.03em;
  color: var(--gold); min-width: 3.2ch;
}
.spec-row dd { font-size: 13.5px; color: var(--text-sub); line-height: 1.55; }
.spec-row dd b { display: block; color: var(--text); font-family: var(--display); font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }

/* ========================================================================
   SERVICES HOMEPAGE TEASER
======================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.svc {
  display: flex; flex-direction: column;
  background: var(--raised); border: 1px solid var(--hair);
  border-radius: 20px; overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.svc:hover { border-color: var(--gold-hair); transform: translateY(-4px); box-shadow: var(--shadow); }
.svc-shot { position: relative; aspect-ratio: 16 / 10; }
.svc-shot img { width: 100%; height: 100%; object-fit: cover; }
.svc-shot::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--gold); }
.svc-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { margin-bottom: 10px; }
.svc-body p { font-size: 13.5px; color: var(--text-sub); line-height: 1.65; flex: 1; margin-bottom: 20px; }
.svc-body .svc-more {
  font-size: 13px; font-weight: 700; color: var(--gold);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ========================================================================
   METHODOLOGY 5-STAGE FLOW (HOMEPAGE)
======================================================================== */
.flow {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4vw, 56px); align-items: start;
}
.flow-list { list-style: none; border-top: 1px solid var(--hair); }
.flow-step {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  width: 100%; text-align: left; padding: 18px 4px; background: none; border: none;
  border-bottom: 1px solid var(--hair); color: var(--text-sub);
  font-family: var(--body); font-size: 14.5px; cursor: pointer;
  transition: color .2s ease, padding-left .2s ease;
}
.flow-step:hover { color: var(--text); padding-left: 10px; }
.flow-step .n { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--hair-strong); transition: color .2s ease; }
.flow-step .t { font-weight: 600; }
.flow-step .c { font-size: 12px; opacity: 0; transition: opacity .2s ease; }
.flow-step[aria-selected="true"] { color: var(--text); padding-left: 10px; border-bottom-color: var(--gold-hair); }
.flow-step[aria-selected="true"] .n { color: var(--gold); }
.flow-step[aria-selected="true"] .c { opacity: 1; color: var(--gold); }

.flow-panel {
  position: relative; background: var(--raised); border: 1px solid var(--hair);
  border-radius: 20px; padding: clamp(26px, 3.2vw, 36px); min-height: 290px;
}
.flow-panel h3 { margin-bottom: 12px; }
.flow-panel > p { font-size: 14px; color: var(--text-sub); line-height: 1.7; }
.flow-out { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair); }
.flow-out h4 { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.flow-out ul { list-style: none; display: grid; gap: 9px; }
.flow-out li { display: flex; gap: 10px; font-size: 13px; color: var(--text-sub); line-height: 1.5; }
.flow-out li::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; margin-top: 8px; background: var(--gold); transform: rotate(45deg); }

/* ========================================================================
   ASSURANCE: OPEN-BOOK LEDGER
======================================================================== */
.assure { background: var(--raised); border: 1px solid var(--hair); border-radius: 24px; overflow: hidden; }
.assure-head { padding: clamp(28px, 3.4vw, 42px) clamp(24px, 3vw, 42px) 0; max-width: 68ch; }
.assure-head h2 { margin-bottom: 12px; }
.assure-head p { font-size: 14px; color: var(--text-sub); line-height: 1.7; }

.assure-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 26px clamp(24px, 3vw, 42px) 0; scrollbar-width: none; }
.assure-tabs::-webkit-scrollbar { display: none; }
.assure-tab {
  flex-shrink: 0; padding: 10px 18px; border: 1px solid var(--hair); border-radius: 999px;
  background: transparent; color: var(--text-sub); font-family: var(--body); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .2s ease;
}
.assure-tab:hover { color: var(--text); border-color: var(--hair-strong); }
.assure-tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #000; }

.assure-body { padding: 26px clamp(24px, 3vw, 42px) clamp(28px, 3.4vw, 42px); }
.assure-pane { display: none; }
.assure-pane.is-on { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.assure-pane h3 { margin-bottom: 10px; }
.assure-pane p { font-size: 13.5px; color: var(--text-sub); line-height: 1.68; }

.ledger { border-top: 1px solid var(--hair); align-self: start; }
.ledger-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 2px; border-bottom: 1px solid var(--hair); font-size: 13px;
}
.ledger-row span { color: var(--text-sub); }
.ledger-row b { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.ledger-row b.ok { color: var(--live); }

/* ========================================================================
   FLAGSHIP PROJECT & GALLERY
======================================================================== */
.feature {
  background: var(--raised); border: 1px solid var(--hair); border-radius: 24px;
  padding: clamp(26px, 3.4vw, 42px); display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 3.6vw, 44px); align-items: center;
}
.feature-where { color: var(--gold); font-weight: 600; font-size: 14px; margin: 6px 0 14px; }
.feature p { font-size: 13.5px; color: var(--text-sub); line-height: 1.68; }

.sched { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.sched div { background: var(--inset); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 13px; }
.sched i { color: var(--gold); font-size: 15px; }
.sched strong { display: block; font-family: var(--display); font-size: 13px; font-weight: 700; margin: 8px 0 3px; }
.sched span { font-size: 11.5px; color: var(--text-sub); line-height: 1.45; display: block; }

.gallery { display: flex; flex-direction: column; gap: 12px; }
.stage { border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); aspect-ratio: 16 / 10; background: var(--inset); }
.stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; }

.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.thumb {
  aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1.5px solid transparent;
  background: none; padding: 0; cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .85; }
.thumb[aria-selected="true"] { opacity: 1; border-color: var(--gold); }

/* ========================================================================
   DEVELOPMENT PIPELINE
======================================================================== */
.pipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }
.pipe {
  position: relative; display: flex; flex-direction: column; border: 1px solid var(--hair);
  border-radius: 18px; overflow: hidden; background: var(--raised); transition: border-color .25s ease, transform .25s ease;
}
.pipe:hover { border-color: var(--gold-hair); transform: translateY(-3px); }
.pipe-shot { aspect-ratio: 3 / 2; background: var(--inset); position: relative; }
.pipe-shot img { width: 100%; height: 100%; object-fit: cover; }
.pipe-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.pipe-body h3 { font-size: 16px; margin-bottom: 4px; }
.pipe-where { font-size: 12.5px; color: var(--gold); margin-bottom: 12px; }
.pipe-body p { font-size: 13px; color: var(--text-sub); line-height: 1.6; flex: 1; }
.chip {
  position: absolute; top: 13px; left: 13px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; background: rgba(7, 9, 14, .84); border: 1px solid var(--gold-hair);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--display);
  font-size: 11px; font-weight: 700; color: #fff;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.chip--soon .dot { background: var(--gold); }

/* ========================================================================
   ABOUT PAGE MODULES (MISSION/VISION, VALUES, MILESTONES, TEAM)
======================================================================== */
.mission-vision-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  align-items: center;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(34px, 4.4vw, 56px);
  box-shadow: var(--shadow);
  gap: clamp(20px, 3vw, 40px);
}
.mv-block p + p { margin-top: 14px; }
.mv-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.mv-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-wash);
  border: 1px solid var(--gold-hair);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.mv-center {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.mv-center::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hair-strong);
  z-index: 1;
}
.mv-emblem {
  position: relative;
  z-index: 2;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--gold);
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(229, 161, 24, 0.25);
  padding: 18px;
}
.mv-emblem img { width: 100%; height: 100%; object-fit: contain; }
.mv-emblem-text {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  color: var(--gold);
}

.section-center-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 42px;
}
.band-mark-center {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.val-card {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 30px 24px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.val-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-hair);
  box-shadow: var(--shadow);
}
.val-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.val-card h3 { font-size: 16px; margin-bottom: 12px; line-height: 1.35; }
.val-card p { font-size: 13.5px; color: var(--text-sub); line-height: 1.68; }

.history-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--hair);
  padding-top: 36px;
}
.history-item { position: relative; }
.history-step {
  display: inline-block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  background: var(--gold-wash);
  border: 1px solid var(--gold-hair);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.history-item h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.history-item p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.65;
}

.team-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 36px;
}
.team-nav-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.team-filter-pill {
  background: var(--control);
  border: 1px solid var(--hair-strong);
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.team-filter-pill:hover,
.team-filter-pill.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-wash);
}
.team-arrows { display: flex; gap: 8px; }
.team-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--raised);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}
.team-arrow:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.team-track-container {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 12px;
}
.team-track-container::-webkit-scrollbar { display: none; }
.team-grid {
  display: flex;
  gap: 22px;
  transition: transform 0.4s ease;
}
.team-grid.is-grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-card {
  flex: 0 0 310px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.team-grid.is-grid-view .team-card { flex: auto; }
.team-card:hover {
  border-color: var(--gold-hair);
  transform: translateY(-3px);
}
.team-avatar {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--inset);
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}
.team-card:hover .team-avatar img { transform: scale(1.03); }
.team-info {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.team-name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.team-role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 14px;
  line-height: 1.45;
}
.team-bio {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.62;
}

/* ========================================================================
   SERVICES PAGE: CONFIGURATOR & WORKSTATION CONSOLE
======================================================================== */
.config-box {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(34px, 4.4vw, 54px);
  box-shadow: var(--shadow);
}
.config-intro { max-width: 680px; margin-bottom: 34px; }
.config-intro h2 { margin-bottom: 12px; }
.config-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 34px;
}
.config-field label {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.config-select {
  width: 100%;
  padding: 13px 16px;
  background: var(--inset);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.config-select:focus { border-color: var(--gold); }
.config-select option { background: var(--ink); color: var(--text); }

.config-output {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: 24px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 24px 28px;
}
.out-col { display: flex; flex-direction: column; }
.out-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.out-val {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.25;
}
.out-col small { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.out-action { justify-self: flex-end; }

.tech-tab-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tech-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--text-sub);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.tech-tab-btn:hover {
  color: var(--text);
  border-color: var(--hair-strong);
  background: var(--inset);
}
.tech-tab-btn.is-active {
  background: var(--gold-wash);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 4px 20px rgba(229, 161, 24, 0.15);
}
.tab-idx {
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  background: var(--control);
  padding: 3px 8px;
  border-radius: 6px;
  color: inherit;
}
.tech-tab-btn.is-active .tab-idx { background: var(--gold); color: #000; }

.tech-workstation {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tech-pane {
  display: none;
  animation: fadeIn 0.35s ease forwards;
}
.tech-pane.is-active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tech-pane-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 520px;
}
.tech-pane-media { position: relative; background: var(--inset); }
.tech-pane-media img { width: 100%; height: 100%; object-fit: cover; }
.pane-overlay-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(6, 9, 15, 0.88);
  border: 1px solid var(--gold-hair);
  color: #fff;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.tech-pane-info {
  padding: clamp(32px, 4vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tech-badge {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.tech-pane-title-row h3 { margin-bottom: 14px; line-height: 1.2; }
.tech-desc {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.68;
  margin-bottom: 24px;
}
.tech-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 24px;
}
.spec-cell span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  margin-bottom: 3px;
}
.spec-cell b {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  display: block;
}
.tech-pane-cta { margin-top: 26px; }

/* ========================================================================
   UPGRADE 1: TENDER PACK & CAPABILITY STATEMENT TRAY
======================================================================== */
.dossier-tray {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(30px, 3.8vw, 44px);
  box-shadow: var(--shadow);
}
.dossier-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.dossier-badge {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dossier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dossier-card {
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.dossier-card:hover {
  border-color: var(--gold-hair);
  transform: translateY(-3px);
}
.dossier-filetype {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--control);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 16px;
}
.dossier-meta h4 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.35;
  margin-bottom: 6px;
}
.dossier-meta span {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  margin-bottom: 10px;
}
.dossier-meta small {
  display: block;
  font-size: 11px;
  font-family: var(--display);
  color: var(--gold);
  letter-spacing: 0.04em;
}
.dossier-btn {
  width: 100%;
  border-color: var(--hair-strong);
  font-size: 12px;
  gap: 8px;
}
.dossier-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ========================================================================
   METHODOLOGY INTERACTIVE STEPPER (SERVICES)
======================================================================== */
.method-console {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(34px, 4.4vw, 54px);
  box-shadow: var(--shadow);
}
.method-head { max-width: 680px; margin-bottom: 36px; }
.method-head h2 { margin-bottom: 12px; }
.method-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.method-step-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
}
.method-step-btn:hover { border-color: var(--gold-hair); background: var(--raised); }
.method-step-btn.is-active { background: var(--gold-wash); border-color: var(--gold); }
.m-num {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-sub);
  background: var(--control);
  padding: 4px 8px;
  border-radius: 6px;
}
.method-step-btn.is-active .m-num { background: var(--gold); color: #000; }
.m-label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.method-display {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 4vw, 44px);
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: clamp(28px, 3.4vw, 42px);
  animation: fadeIn 0.35s ease forwards;
}
.m-phase-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.m-phase-title { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 14px; color: var(--text); }
.m-phase-desc { font-size: 14px; color: var(--text-sub); line-height: 1.7; margin-bottom: 24px; }
.m-deliverables h4 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.m-deliverables ul { list-style: none; display: grid; gap: 10px; }
.m-deliverables li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.m-deliverables li i { color: var(--gold); font-size: 13px; }
.m-card-right { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.m-metric-card {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px 20px;
}
.m-metric-card span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  margin-bottom: 4px;
}
.m-metric-card strong {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.25;
}
.m-metric-card small { font-size: 12px; color: var(--text-sub); }

/* ========================================================================
   UPGRADE 2: LIVE FCT CORRIDOR DEPLOYMENT MAP CONSOLE
======================================================================== */
.fct-map-console {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.fct-map-viewport {
  background: #04060A;
  border-right: 1px solid var(--hair);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fct-svg {
  width: 100%;
  height: auto;
  max-height: 480px;
  overflow: visible;
}

/* Pins and Pulses */
.fct-pin {
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease;
}
.fct-pin:hover .fct-core {
  fill: var(--gold-lift);
}
.fct-pulse {
  animation: svgPulse 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  transform-origin: center;
}
@keyframes svgPulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
.fct-pin.is-active .fct-core {
  fill: #FFFFFF;
  stroke: var(--gold);
  stroke-width: 3px;
}
.fct-pin.is-active text {
  fill: var(--gold);
  font-weight: 800;
}

/* Telemetry Readout */
.fct-telemetry {
  padding: clamp(30px, 3.8vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--raised);
}
.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.telemetry-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--live);
}
.telemetry-live-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
}
.telemetry-code {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--control);
  padding: 3px 8px;
  border-radius: 6px;
}
.telemetry-title {
  font-size: clamp(20px, 2.2vw, 26px);
  color: #FFFFFF;
  margin-bottom: 12px;
  line-height: 1.25;
}
.telemetry-desc {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.65;
  margin-bottom: 24px;
}
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 24px;
}
.t-cell span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  margin-bottom: 3px;
}
.t-cell strong {
  display: block;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.telemetry-cta {
  margin-top: 4px;
}

/* ========================================================================
   GLOBAL EXECUTIVE ACTION / DOWNLOAD BANNER
======================================================================== */
.next {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px;
  background: var(--raised); border: 1px solid var(--hair); border-radius: 22px;
  padding: clamp(32px, 4vw, 46px);
}
.next-lead h3 { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; margin-bottom: 8px; }
.next-lead p { font-size: 14px; color: var(--text-sub); max-width: 50ch; }
.next-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.next-actions small { font-size: 13px; color: var(--text-sub); }
.next-actions small b { color: var(--text); font-variant-numeric: tabular-nums; }
.next-actions small a { color: var(--gold); }

/* ========================================================================
   FOOTER
======================================================================== */
.foot {
  background: var(--footer); color: #F6F8FB; border-top: 1px solid rgba(255, 255, 255, .07);
  padding: clamp(54px, 6.4vw, 76px) 0 30px;
}
.foot-grid { display: grid; grid-template-columns: 1.85fr 1fr 1.15fr 1.35fr; gap: clamp(26px, 3.4vw, 46px); }
.foot-about { font-size: 13px; color: #94A3B8; line-height: 1.68; margin: 16px 0 22px; max-width: 42ch; }
.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15); color: #CBD5E1; font-size: 13.5px;
  transition: border-color .2s ease, color .2s ease;
}
.foot-social a:hover { border-color: var(--gold); color: var(--gold); }
.foot h4 { font-family: var(--display); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.foot ul { list-style: none; display: grid; gap: 10px; font-size: 13px; color: #94A3B8; }
.foot ul a:hover { color: var(--gold); }
.foot ul i { color: var(--gold); margin-right: 8px; }
.foot-base {
  max-width: var(--shell); margin: 42px auto 0; padding: 22px var(--gut) 0;
  border-top: 1px solid rgba(255, 255, 255, .06); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: #64748B;
}

/* Controls */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--gold); z-index: 1200; transition: width .08s linear; }
.to-top {
  position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #000;
  border: none; font-size: 14px; cursor: pointer; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 900;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }

/* ========================================================================
   RESPONSIVE OVERRIDES
======================================================================== */
@media (max-width: 1040px) {
  .hero-metric-deck { grid-template-columns: 1fr; }
  .svc-quad-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .feature, .flow { grid-template-columns: 1fr; }
  .assure-pane.is-on { grid-template-columns: 1fr; }
  .pipe-grid, .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-vision-card { grid-template-columns: 1fr; }
  .mv-center { display: none; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .history-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid.is-grid-view { grid-template-columns: repeat(2, 1fr); }
  .tech-pane-grid { grid-template-columns: 1fr; }
  .tech-pane-media { min-height: 280px; }
  .dossier-grid { grid-template-columns: 1fr; }
  .method-stepper { grid-template-columns: repeat(2, 1fr); }
  .method-display { grid-template-columns: 1fr; }
  .fct-map-console { grid-template-columns: 1fr; }
  .fct-map-viewport {
    border-right: none;
    border-bottom: 1px solid var(--hair);
    min-height: 340px;
  }
  .config-form-grid, .config-output { grid-template-columns: 1fr; }
  .out-action { justify-self: flex-start; margin-top: 10px; }
}

@media (max-width: 720px) {
  .svc-grid, .pipe-grid, .sched, .foot-grid { grid-template-columns: 1fr; }
  .values-grid, .history-grid, .team-grid.is-grid-view { grid-template-columns: 1fr; }
  .team-card { flex: 0 0 280px; }
  .next { flex-direction: column; align-items: flex-start; }
  .foot-base { flex-direction: column; text-align: center; justify-content: center; }
  .cred-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .zf-header { top: 40px; }
  .thumbs { grid-template-columns: repeat(3, 1fr); }
  .hero-center-actions,
  .svc-hero-quickcta { width: 100%; }
  .hero-center-actions .btn,
  .svc-hero-quickcta .btn { width: 100%; }
  .tech-tab-bar { flex-direction: column; align-items: stretch; }
  .tech-tab-btn { justify-content: center; }
  .tech-specs-grid { grid-template-columns: 1fr; }
  .method-stepper { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .svc-quad-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .zf-strip-track, .ticker-track { animation: none; }
  .ticker-track { flex-wrap: wrap; justify-content: center; width: 100%; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal-group > * { opacity: 1 !important; transform: none !important; }
}

/* ========================================================================
   PROJECTS PAGE ARCHITECTURE
======================================================================== */
.hero-center--projects {
  background-image: 
    radial-gradient(ellipse 90% 65% at 50% 45%, rgba(6, 9, 15, 0.15) 0%, #06090F 95%),
    linear-gradient(180deg, rgba(6, 9, 15, 0.82) 0%, rgba(6, 9, 15, 0.5) 60%, #06090F 100%),
    url('../img/hero.png');
}

/* Pricing Toggle Pill */
.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
}
.pricing-toggle {
  display: inline-flex;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 6px;
  gap: 8px;
  box-shadow: var(--shadow);
}
.pt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.25s ease;
}
.pt-btn span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.pt-btn b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}
.pt-btn:hover { color: var(--gold); }
.pt-btn.is-active {
  background: var(--gold);
  color: #000;
}
.pt-btn.is-active span { color: #000; }
.pt-btn.is-active b { color: #000; }

/* Flagship Project Showcase Console */
.project-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3.6vw, 44px);
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: var(--shadow);
  margin-bottom: 32px;
}

/* Showcase Gallery */
.ps-gallery { display: flex; flex-direction: column; gap: 14px; }
.ps-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: var(--inset);
  border: 1px solid var(--hair);
}
.ps-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.ps-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(6, 8, 13, 0.85);
  border: 1px solid var(--gold-hair);
  color: #fff;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  z-index: 2;
}
.ps-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
}
.ps-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: rgba(6, 8, 13, 0.75);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  z-index: 2;
}
.ps-nav-btn:hover {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}
.ps-prev { left: 14px; }
.ps-next { right: 14px; }

.ps-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.ps-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--inset);
  cursor: pointer;
  opacity: 0.55;
  padding: 0;
  transition: all 0.2s ease;
}
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-thumb:hover { opacity: 0.85; }
.ps-thumb.is-active { opacity: 1; border-color: var(--gold); }

/* Showcase Spec Details */
.ps-spec {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ps-summary {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.65;
  margin-bottom: 24px;
}
.ps-data-grid {
  display: grid;
  gap: 12px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 24px;
}
.ps-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ps-cell-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gold-wash);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ps-cell small {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
}
.ps-cell strong {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.ps-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Estate Highlights Strip */
.estate-amenities {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: clamp(24px, 3.2vw, 36px);
  margin-bottom: 32px;
}
.ea-lead { max-width: 640px; margin-bottom: 24px; }
.ea-lead h3 { margin-bottom: 6px; }
.ea-lead p { font-size: 13px; color: var(--text-sub); }
.ea-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  border-top: 1px solid var(--hair);
  padding-top: 24px;
}
.ea-item i {
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 10px;
  display: block;
}
.ea-item strong {
  display: block;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.ea-item span {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.45;
  display: block;
}

/* 1-Year Payment Plan Breakdown */
.payment-plan-box {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(30px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.ppb-lead { max-width: 680px; margin-bottom: 28px; }
.ppb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ppb-card {
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ppb-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-hair);
}
.ppb-num {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  background: var(--control);
  padding: 3px 7px;
  border-radius: 5px;
  width: fit-content;
  margin-bottom: 12px;
}
.ppb-pct {
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.ppb-card h4 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.ppb-sub {
  font-size: 11.5px;
  color: var(--text-sub);
  margin-bottom: 14px;
}
.ppb-amt {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.ppb-card small {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 4px;
}
.ppb-action-card {
  background: #06090F;
  border-color: var(--gold-hair);
  justify-content: center;
}
.ppb-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.ppb-action-card p {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  margin: 6px 0 18px;
}

/* Kyami Enclave Section */
.kyami-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-wash);
  border: 1px solid var(--gold-hair);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.kyami-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.kyami-card {
  background: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.kyami-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-hair);
}
.kyami-card.kc-popular {
  border-color: var(--gold);
  box-shadow: 0 8px 30px rgba(229, 161, 24, 0.15);
}
.kc-popular-tag {
  position: absolute;
  top: -11px;
  right: 18px;
  background: var(--gold);
  color: #000;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 999px;
}
.kc-head { margin-bottom: 14px; }
.kc-type {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kc-head h4 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.kc-price {
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.kc-price small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 2px;
}
.kc-price b {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 900;
  color: var(--gold);
}
.kc-equity {
  font-size: 11.5px;
  color: var(--text-sub);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.kc-equity strong {
  display: block;
  color: var(--text);
  font-family: var(--display);
  font-size: 13px;
  margin-top: 2px;
}
.kc-features {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  flex: 1;
}
.kc-features li {
  font-size: 11.5px;
  color: var(--text-sub);
  display: flex;
  gap: 8px;
  line-height: 1.4;
}
.kc-features li i {
  color: var(--gold);
  font-size: 11px;
  margin-top: 2px;
}
.kc-btn { width: 100%; text-align: center; }

/* Kyami Finance Facilities Bar */
.kyami-finance-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 24px;
}
.kf-item {
  display: flex;
  gap: 14px;
  align-items: center;
}
.kf-item i {
  font-size: 20px;
  color: var(--gold);
  flex-shrink: 0;
}
.kf-item strong {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.kf-item span {
  display: block;
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.4;
}

/* Responsive Overrides for Projects */
@media (max-width: 1080px) {
  .project-showcase { grid-template-columns: 1fr; }
  .ppb-grid { grid-template-columns: repeat(2, 1fr); }
  .kyami-grid { grid-template-columns: repeat(3, 1fr); }
  .kyami-finance-box { grid-template-columns: repeat(2, 1fr); }
  .ea-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .ppb-grid, .kyami-grid, .kyami-finance-box, .ea-grid { grid-template-columns: 1fr; }
  .ps-thumbs { grid-template-columns: repeat(3, 1fr); }
  .pricing-toggle { flex-direction: column; width: 100%; border-radius: 16px; }
  .pt-btn { width: 100%; }
}

/* ========================================================================
   ENTERPRISE CONTACT US ARCHITECTURE & UPGRADES
======================================================================== */
.hero-center--contact {
  background-image: 
    radial-gradient(ellipse 90% 65% at 50% 45%, rgba(6, 9, 15, 0.15) 0%, #06090F 95%),
    linear-gradient(180deg, rgba(6, 9, 15, 0.85) 0%, rgba(6, 9, 15, 0.5) 60%, #06090F 100%),
    url('../img/bg3.png');
}

.hero-metric-deck-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
}

/* Live Timezone / Diaspora Desk Bar */
.desk-clock-tray {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 20px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: var(--shadow);
}
.dct-lead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dct-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--live);
}
.dct-status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
}
.dct-lead h4 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
}
.dct-clocks {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.dct-clock-cell {
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
}
.dct-city {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
}
.dct-clock-cell strong {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.05em;
  line-height: 1.25;
}
.dct-clock-cell small {
  font-size: 10px;
  color: var(--text-sub);
}

/* Contact Interaction Grid */
.contact-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(30px, 4vw, 54px);
  align-items: start;
}

/* Contact Form Box */
.contact-form-box {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.cfb-head { margin-bottom: 26px; }
.cfb-head h2 { margin-bottom: 8px; }
.cfb-head p { font-size: 13.5px; color: var(--text-sub); }

.cfb-form { display: grid; gap: 16px; }

.cfb-label {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.cfb-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cfb-input-wrap,
.cfb-select-wrap,
.cfb-textarea-wrap {
  position: relative;
  width: 100%;
}
.cfb-input-wrap input,
.cfb-select-wrap select,
.cfb-textarea-wrap textarea {
  width: 100%;
  background: var(--inset);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  padding: 13px 40px 13px 15px;
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cfb-textarea-wrap textarea {
  resize: vertical;
  min-height: 110px;
}
.cfb-input-wrap i,
.cfb-select-wrap i,
.cfb-textarea-wrap i {
  position: absolute;
  right: 14px;
  top: 16px;
  color: var(--text-sub);
  font-size: 13px;
  pointer-events: none;
}
.cfb-select-wrap select {
  appearance: none;
  cursor: pointer;
}
.cfb-select-wrap select option {
  background: var(--ink);
  color: var(--text);
}
.cfb-input-wrap input:focus,
.cfb-select-wrap select:focus,
.cfb-textarea-wrap textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash);
}

/* File Drop Zone */
.cfb-file-dropzone {
  position: relative;
  border: 2px dashed var(--hair-strong);
  border-radius: 14px;
  padding: 22px 18px;
  background: var(--inset);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.cfb-file-dropzone:hover,
.cfb-file-dropzone.is-dragover {
  border-color: var(--gold);
  background: var(--gold-wash);
}
.cfb-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.cfb-dropzone-content i {
  font-size: 26px;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.cfb-dropzone-text span {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.cfb-dropzone-text small {
  font-size: 11px;
  color: var(--text-sub);
}

.cfb-consent { margin: 4px 0 8px; }
.cfb-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-sub);
  cursor: pointer;
  line-height: 1.45;
}
.cfb-checkbox-label input {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.cfb-submit { width: 100%; padding-block: 15px; }
.cfb-feedback {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-height: 20px;
}
.cfb-feedback.is-success { color: var(--live); }
.cfb-feedback.is-error { color: #EF4444; }

/* Contact Information Deck */
.contact-info-deck { display: flex; flex-direction: column; }
.cid-head { margin-bottom: 26px; }
.cid-head h2 { margin-bottom: 8px; }
.cid-head p { font-size: 13.5px; color: var(--text-sub); }

.cid-cards { display: grid; gap: 14px; }
.cid-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 18px 20px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.cid-card:hover {
  border-color: var(--gold-hair);
  transform: translateY(-2px);
}
.cid-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid var(--hair);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cid-content h4 {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.cid-content p {
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.55;
}
.cid-content a:hover { color: var(--gold); }

/* Appointment Banner */
.cid-appointment-banner {
  background: #06090F;
  border: 1px solid var(--gold-hair);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  margin-top: 4px;
}
.cab-left { display: flex; align-items: center; gap: 14px; }
.cab-left i { font-size: 26px; flex-shrink: 0; }
.cab-left h4 {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.cab-left p { font-size: 11.5px; color: var(--text-sub); }

/* Location & Landmarks Layout Grid */
.location-layout-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 22px;
  align-items: stretch;
}

.location-map-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--hair);
  min-height: 420px;
  background: var(--ink);
  box-shadow: var(--shadow);
}
.location-viewport { width: 100%; height: 100%; }
.location-viewport iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: contrast(105%) brightness(95%);
}
.location-floating-card {
  position: absolute;
  top: 20px;
  left: 20px;
  max-width: 360px;
  background: rgba(6, 8, 13, 0.92);
  border: 1px solid var(--gold-hair);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  z-index: 2;
}
.lfc-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lfc-icon { color: var(--gold); font-size: 15px; }
.lfc-title-row h4 {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}
.location-floating-card p {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Landmarks Card */
.landmarks-card {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}
.landmarks-card h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.landmarks-card h4 i { color: var(--gold); }
.landmarks-list {
  list-style: none;
  display: grid;
  gap: 18px;
}
.landmarks-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.landmarks-list li i {
  color: var(--gold);
  font-size: 15px;
  margin-top: 4px;
  flex-shrink: 0;
}
.landmarks-list strong {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.landmarks-list span {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.45;
}

/* Floating WhatsApp Quick Action Button */
.zf-whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--live);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 24px;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.4);
  z-index: 950;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.zf-whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 36px rgba(16, 185, 129, 0.6);
  color: #FFFFFF;
}
.zf-wa-tooltip {
  position: absolute;
  right: 58px;
  background: rgba(6, 8, 13, 0.9);
  border: 1px solid var(--hair-strong);
  color: #FFFFFF;
  padding: 5px 12px;
  border-radius: 8px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.zf-whatsapp-float:hover .zf-wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive Overrides */
@media (max-width: 1040px) {
  .hero-metric-deck-4 { grid-template-columns: repeat(2, 1fr); }
  .contact-main-grid { grid-template-columns: 1fr; }
  .location-layout-grid { grid-template-columns: 1fr; }
  .desk-clock-tray { flex-direction: column; align-items: flex-start; }
  .dct-clocks { width: 100%; justify-content: space-between; }
}

@media (max-width: 640px) {
  .hero-metric-deck-4 { grid-template-columns: 1fr; }
  .cfb-row-2 { grid-template-columns: 1fr; }
  .dct-clocks { flex-direction: column; align-items: stretch; }
  .cid-appointment-banner { flex-direction: column; align-items: flex-start; }
  .location-floating-card {
    position: relative;
    top: auto;
    left: auto;
    max-width: 100%;
    margin: 14px;
    border-radius: 14px;
  }
}
/* ========================================================================
   LEGAL & STATUTORY PAGES (PRIVACY & TERMS)
======================================================================== */
.hero-center--legal {
  min-height: 52svh !important;
  background-image: 
    radial-gradient(ellipse 90% 65% at 50% 45%, rgba(6, 9, 15, 0.2) 0%, #06090F 95%),
    linear-gradient(180deg, rgba(6, 9, 15, 0.88) 0%, rgba(6, 9, 15, 0.55) 60%, #06090F 100%),
    url('../img/bg3.png');
}

.legal-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--inset);
  border: 1px solid var(--hair-strong);
  color: var(--gold);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  margin-top: 6px;
}

/* Centered Article Container Card */
.legal-container {
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: clamp(32px, 4.4vw, 56px);
  box-shadow: var(--shadow);
}

.legal-article {
  color: var(--text-sub);
  font-size: 14.5px;
  line-height: 1.8;
}

.legal-section {
  position: relative;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--hair);
}

.legal-step {
  display: inline-block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold);
  background: var(--gold-wash);
  border: 1px solid var(--gold-hair);
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.legal-section h3 {
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.3;
}

.legal-section p + p {
  margin-top: 14px;
}

.legal-list {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 18px 0;
}

.legal-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--inset);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px 18px;
}

.legal-list li i {
  color: var(--gold);
  font-size: 14px;
  margin-top: 4px;
  flex-shrink: 0;
}

.legal-list strong {
  display: block;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.legal-list span {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.55;
}

.legal-desk-card {
  background: var(--inset);
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  padding: 22px;
  margin-top: 18px;
}

.legal-desk-card h4 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-desk-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
}

.legal-desk-card a {
  color: var(--gold);
  font-weight: 600;
}
.legal-desk-card a:hover {
  text-decoration: underline;
}

.legal-article code {
  background: var(--inset);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid var(--hair);
}