/* ============================================================
   DSECTORS SERVICES LIMITED
   World-Class Design System v4.0
   Brand-Accurate Palette — Logo-Derived Colours
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ═══════════════════════════════════════
   BRAND-ACCURATE DESIGN TOKENS
   Colors extracted from the Dsectors logo
═══════════════════════════════════════ */
:root {
  /* ── Core Light Backgrounds (60% white / grey per 60-30-10) ── */
  --ink:          #ffffff;
  --ink-2:        #f6f7f6;
  --ink-3:        #ececec;   /* Sector Light Grey — section tints / table headers */
  --surface:      #ffffff;
  --surface-2:    #f6f7f6;
  --surface-3:    #ececec;
  --grey-light:   #ECECEC;
  --border:       rgba(26,26,26,0.08);
  --border-2:     rgba(26,26,26,0.14);
  --border-3:     rgba(26,26,26,0.22);
  --divider:      #E0E0E0;   /* table row dividers */

  /* ── Brand Colors — EXACT logo hexes ──
     Legacy alias names (--coral/--gold/--olive) are kept so existing rules
     keep working, but now resolve to the exact spec colours. */
  /* PRIMARY / RESEARCH · Deep Ocean Teal */
  --teal:         #21756D;
  --teal-lt:      #2a8c82;
  --teal-glow:    rgba(33,117,109,0.28);
  --teal-bg:      rgba(33,117,109,0.09);

  /* PRIMARY ACTION / GENDER · HUMANITARIAN · Terracotta Red */
  --terracotta:   #B85346;
  --coral:        #B85346;   /* alias */
  --coral-lt:     #c96b5e;
  --coral-glow:   rgba(184,83,70,0.25);
  --coral-bg:     rgba(184,83,70,0.08);

  /* HIGHLIGHT / INNOVATION / DIGITAL · Mustard Gold */
  --mustard:      #DFB02C;
  --gold:         #DFB02C;   /* alias */
  --gold-lt:      #e9c24f;
  --gold-glow:    rgba(223,176,44,0.28);
  --gold-bg:      rgba(223,176,44,0.12);

  /* SECONDARY / CLIMATE · DRR · Muted Sage Green */
  --sage:         #65745B;
  --olive:        #65745B;   /* alias */
  --olive-lt:     #76866b;
  --olive-glow:   rgba(101,116,91,0.22);

  /* SLATE — primary typography (never pure black) */
  --slate:        #1A1A1A;
  --slate-lt:     #333333;

  /* ── Text ── */
  --text-bright:  #1A1A1A;
  --text:         #2e2e2e;
  --text-muted:   #5a5f5c;
  --text-dim:     #8a908c;
  --white:        #ffffff;

  /* ── Gradients ── */
  --g-primary:    linear-gradient(135deg, #21756D 0%, #2a8c82 50%, #21756D 100%);
  --g-brand:      linear-gradient(135deg, #21756D 0%, #65745B 60%, #21756D 100%);
  --g-coral:      linear-gradient(135deg, #B85346 0%, #c96b5e 100%);
  --g-gold:       linear-gradient(135deg, #DFB02C 0%, #e9c24f 60%, #DFB02C 100%);
  --g-hero:       radial-gradient(ellipse 100% 80% at 70% 20%, rgba(33,117,109,0.10) 0%, transparent 60%),
                  radial-gradient(ellipse 80% 60% at 10% 80%, rgba(101,116,91,0.07) 0%, transparent 60%),
                  radial-gradient(ellipse 60% 40% at 85% 70%, rgba(184,83,70,0.05) 0%, transparent 50%),
                  linear-gradient(180deg, #ffffff 0%, #f6f7f6 100%);
  --g-card:       linear-gradient(145deg, #ffffff 0%, #f6f7f6 100%);
  --g-glass:      linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.45) 100%);

  /* ── Typography ── */
  --f-sans:    'Inter', 'Public Sans', system-ui, sans-serif;
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  /* ── Motion ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  0.2s;
  --dur-base:  0.35s;
  --dur-slow:  0.6s;

  /* ── Layout ── */
  --info-bar-h: 38px;

  /* ── Spacing (8-point system) ── */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px; --sp-6: 48px; --sp-8: 64px;

  /* ── Radius — architectural precision (4–6px, not consumer pills) ── */
  --r-xs:   4px;   --r-sm:  6px;   --r-md:  6px;
  --r-lg:   8px;   --r-xl:  10px;  --r-2xl: 12px;
  --r-full: 9999px;

  /* ── Shadows (subtle, institutional) ── */
  --sh-card:    0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --sh-card-hover: 0 12px 24px -6px rgba(0,0,0,0.10), 0 4px 8px -2px rgba(0,0,0,0.05);
  --sh-teal:    0 0 40px rgba(33,117,109,0.14);
  --sh-coral:   0 0 40px rgba(184,83,70,0.16);
  --sh-glow-sm: 0 0 20px rgba(33,117,109,0.16);
  --sh-inset:   inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--f-sans); background: var(--ink); color: var(--text); line-height: 1.7; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ═══════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════ */
@keyframes float      { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-20px) rotate(1deg)} 66%{transform:translateY(-10px) rotate(-1deg)} }
@keyframes pulse-glow { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.05)} }
@keyframes grad-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes spin-slow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes ticker     { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes border-dance { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
@keyframes morph      { 0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} 100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} }
@keyframes slide-up   { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in    { from{opacity:0} to{opacity:1} }
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes reveal-bar { from{width:0} to{width:var(--target-w,100%)} }
@keyframes spin-logo  { 0%,100%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(5deg) scale(1.03)} }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.container        { width:100%; max-width:1240px; margin:0 auto; padding:0 2rem; }
.container--wide  { max-width:1440px; }
.container--narrow{ max-width:860px; }
.section    { padding: 7rem 0; }
.section--lg{ padding:10rem 0; }
.section--sm{ padding: 4rem 0; }

/* ═══════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════ */
/* Type scale — exact spec (H1→footnote) */
.t-display {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);   /* H1 36→56px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}
.t-h2 {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.2vw, 2.25rem); /* H2 28→36px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}
.t-h3 {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);    /* H3 20→24px */
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-bright);
}
.t-body{ font-size:1rem; color:var(--text); line-height:1.6; }    /* body 16px */
.t-small{ font-size:.875rem; color:var(--text-muted); line-height:1.5; letter-spacing:.01em; }
.text-bright  { color:var(--text-bright); }
.text-muted   { color:var(--text-muted); }
.text-teal    { color:var(--teal-lt); }
.text-coral   { color:var(--coral-lt); }
.text-gold    { color:var(--gold-lt); }

.gradient-text {
  background: var(--g-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--coral {
  background: var(--g-coral);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--gold {
  background: var(--g-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════
   SECTION LABELS
═══════════════════════════════════════ */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--f-mono);
  font-size: .75rem;          /* UI label spec: 12px */
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.25rem;
}
.section-label::before { content:''; width:2.5rem; height:1px; background:linear-gradient(90deg,transparent,var(--teal)); }
.section-label::after  { content:''; width:1.5rem; height:1px; background:linear-gradient(90deg,var(--teal),transparent); }

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .85rem; border-radius:var(--r-full); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.badge--teal   { background:var(--teal-bg);    color:var(--teal-lt);   border:1px solid rgba(33,117,109,0.3); }
.badge--coral  { background:var(--coral-bg);   color:var(--coral-lt);  border:1px solid rgba(184,83,70,0.3); }
.badge--gold   { background:var(--gold-bg);    color:var(--gold-lt);   border:1px solid rgba(223,176,44,0.3); }
.badge--olive  { background:rgba(101,116,91,0.12); color:var(--olive-lt); border:1px solid rgba(101,116,91,0.28); }
.badge--slate  { background:rgba(101,116,91,0.1); color:var(--slate-lt); border:1px solid rgba(101,116,91,0.2); }
/* Legacy aliases */
.badge--blue   { background:var(--teal-bg);    color:var(--teal-lt);   border:1px solid rgba(33,117,109,0.3); }
.badge--violet { background:rgba(101,116,91,0.12); color:var(--olive-lt); border:1px solid rgba(101,116,91,0.28); }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 2.1rem;
  border-radius: var(--r-sm);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: all var(--dur-base) var(--ease-out-expo);
  position: relative;
  white-space: nowrap;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 2px 10px var(--teal-glow);
}
.btn--primary:hover { transform:translateY(-2px); background:var(--teal-lt); box-shadow:0 6px 20px var(--teal-glow); }

/* Primary ACTION — Terracotta (Request Credentials / procurement CTAs) */
.btn--cta {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 2px 12px var(--coral-glow);
}
.btn--cta:hover { transform:translateY(-2px); background:#c96b5e; box-shadow:0 8px 22px var(--coral-glow); }

.btn--coral {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 2px 10px var(--coral-glow);
}
.btn--coral:hover { transform:translateY(-2px); background:var(--coral-lt); box-shadow:0 6px 20px var(--coral-glow); }

.btn--glass {
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text-bright);
}
.btn--glass:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-2px); box-shadow:0 6px 20px rgba(16,30,26,.1); }

.btn--ghost { background:transparent; color:var(--teal-lt); padding-left:0; padding-right:0; font-weight:600; }
.btn--ghost .btn-arrow { display:inline-flex; width:28px; height:28px; background:rgba(33,117,109,0.15); border:1px solid rgba(33,117,109,0.3); border-radius:50%; align-items:center; justify-content:center; font-size:.75rem; transition:all var(--dur-base) var(--ease-out-expo); }
.btn--ghost:hover .btn-arrow { background:var(--teal); transform:translateX(4px); }

/* ═══════════════════════════════════════
   GLASS CARD
═══════════════════════════════════════ */
.glass-card {
  background: var(--g-glass);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-inset), var(--sh-card);
  position: relative;
  overflow: hidden;
}
.glass-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(26,26,26,0.1),transparent); }

/* Animated border */
.border-animated { position:relative; }
.border-animated::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(90deg,var(--teal),var(--coral),var(--gold),var(--teal));
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out; mask-composite:exclude;
  opacity:0; transition:opacity var(--dur-base); animation:border-dance 3s linear infinite;
}
.border-animated:hover::before { opacity:1; }

/* ═══════════════════════════════════════
   INFO BAR
═══════════════════════════════════════ */
.info-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  height: var(--info-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 2rem;
  background: var(--teal);
  color: rgba(255,255,255,0.92);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.info-bar__group { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.info-bar__item   { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.info-bar__item svg, .info-bar__item span.info-bar__icon { flex-shrink: 0; opacity: .85; }
.info-bar a { color: inherit; }
.info-bar a:hover { color: #fff; text-decoration: underline; }

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
.nav {
  position: fixed;
  top: var(--info-bar-h); left: 0; right: 0;
  z-index: 1000;
  transition: all var(--dur-base) var(--ease-in-out);
}
.nav.scrolled {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid var(--border-2);
  box-shadow: 0 4px 30px rgba(16,30,26,.08), 0 1px 0 rgba(255,255,255,.6);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 2rem;
  max-width: 1240px;
  margin: 0 auto;
}

/* ── Logo ── */
.nav__logo { display:flex; align-items:center; gap:.85rem; text-decoration:none; }

/* ── Inline SVG logo: sector-assembly on load + emblem hover-spin ── */
.nav__logo-svg { height:46px; width:auto; display:block; overflow:visible; }
.logo-emblem { transform-box: view-box; transform-origin: 44px 44px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.nav__logo:hover .logo-emblem { transform: rotate(45deg); }
.nav__logo-svg .sector { stroke:#fff; stroke-width:2.2; opacity:0; animation: cms-sector-in .5s var(--ease-out-expo) forwards; }
.nav__logo-svg .sector.s0 { animation-delay:.40s }
.nav__logo-svg .sector.s1 { animation-delay:.48s }
.nav__logo-svg .sector.s2 { animation-delay:.56s }
.nav__logo-svg .sector.s3 { animation-delay:.64s }
.nav__logo-svg .sector.s4 { animation-delay:.72s }
.nav__logo-svg .sector.s5 { animation-delay:.80s }
.nav__logo-svg .sector.s6 { animation-delay:.88s }
.nav__logo-svg .sector.s7 { animation-delay:.96s }
.nav__logo-svg .logo-wordmark { opacity:0; transform:translateX(-8px); transform-box:view-box; animation: cms-word-in .55s 1.02s var(--ease-out-expo) forwards; }
@keyframes cms-sector-in { to { opacity:1 } }
@keyframes cms-word-in { to { opacity:1; transform:translateX(0) } }
@media (prefers-reduced-motion: reduce) {
  .nav__logo-svg .sector, .nav__logo-svg .logo-wordmark { animation:none; opacity:1; transform:none; }
  .nav__logo:hover .logo-emblem { transform:none; }
}

/* Image-based logo (footer / intro) */
.nav__logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base);
  filter: brightness(1) drop-shadow(0 0 8px rgba(33,117,109,0));
}
.nav__logo:hover .nav__logo-img {
  transform: scale(1.05) rotate(-2deg);
  filter: brightness(1.1) drop-shadow(0 0 12px rgba(33,117,109,0.4));
}

/* Fallback mark (shown if no image) */
.nav__logo-mark {
  position: relative;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__logo-mark-bg {
  position: absolute;
  inset: 0;
  background: var(--g-brand);
  border-radius: 10px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.nav__logo:hover .nav__logo-mark-bg { transform:rotate(10deg) scale(1.1); }
.nav__logo-mark-text { position:relative; font-family:var(--f-sans); font-size:1rem; font-weight:800; color:#fff; letter-spacing:-.05em; z-index:1; }

.nav__logo-info { display:flex; flex-direction:column; line-height:1.1; }
.nav__logo-name { font-size:1rem; font-weight:800; color:var(--text-bright); letter-spacing:-.02em; }
.nav__logo-sub  { font-size:.6rem; font-weight:500; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; margin-top:2px; }

/* Nav Links */
.nav__links { display:flex; align-items:center; gap:.15rem; }
.nav__link {
  position: relative;
  padding: .5rem 1rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: all var(--dur-fast) var(--ease-in-out);
  white-space: nowrap;
}
.nav__link::after {
  content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%) scaleX(0);
  width:calc(100% - 2rem); height:1.5px; background:var(--teal); border-radius:var(--r-full);
  transition:transform var(--dur-base) var(--ease-out-expo);
}
.nav__link:hover, .nav__link.active { color:var(--text-bright); }
.nav__link:hover::after, .nav__link.active::after { transform:translateX(-50%) scaleX(1); }

.nav__cta-btn {
  margin-left:.5rem; padding:.6rem 1.5rem !important;
  background:var(--teal) !important;
  color:#fff !important; border-radius:var(--r-sm) !important;
  font-size:.82rem !important; font-weight:700 !important;
  transition:all var(--dur-base) var(--ease-out-expo) !important;
}
.nav__cta-btn:hover { transform:translateY(-2px) !important; background:var(--terracotta) !important; }

/* ── Dropdown mega-menu ── */
.nav__item { position:relative; }
.nav__link--parent {
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:.85rem; font-weight:500; color:var(--text-muted);
  padding:.5rem 1rem; border-radius:var(--r-sm);
  transition:color var(--dur-fast);
}
.nav__link--parent:hover, .nav__item:focus-within .nav__link--parent { color:var(--teal); }
.nav__link--parent .caret { width:9px; height:9px; transition:transform var(--dur-base) var(--ease-out-expo); }
.nav__item:hover .caret, .nav__item:focus-within .caret { transform:rotate(180deg); }

.nav__dropdown {
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--sh-card-hover); padding:.5rem;
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 200ms var(--ease-out-expo), transform 200ms var(--ease-out-expo), visibility 200ms;
  z-index:50;
}
.nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown {
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav__dropdown a {
  display:block; padding:.6rem .8rem; border-radius:var(--r-sm);
  font-size:.85rem; font-weight:500; color:var(--text); white-space:nowrap;
  border-left:2px solid transparent; transition:all var(--dur-fast);
}
.nav__dropdown a:hover { background:var(--ink-3); color:var(--teal); border-left-color:var(--teal); }

/* Hamburger */
.nav__hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--border-2);
}
.nav__hamburger span { display:block; height:1.5px; background:var(--text); border-radius:2px; transition:all var(--dur-base) var(--ease-in-out); }
.nav__hamburger.open { background:var(--surface-2); }
.nav__hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(4.5px,4.5px); }
.nav__hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav__hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(4.5px,-4.5px); }

.nav__mobile {
  display:none; flex-direction:column; gap:.4rem; padding:1.25rem 2rem 2rem;
  background:rgba(255,255,255,0.97); backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
}
.nav__mobile.open { display:flex; }
.nav__mobile .nav__link { font-size:1rem; padding:.85rem 1rem; }
.nav__mobile-group { border-top:1px solid var(--border); padding-top:.4rem; margin-top:.4rem; }
.nav__mobile-group-title { font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); padding:.6rem 1rem .2rem; }
.nav__mobile-group a { display:block; padding:.55rem 1rem .55rem 1.75rem; font-size:.92rem; color:var(--text); }
.nav__mobile-group a:hover { color:var(--teal); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero { position:relative; min-height:60vh; display:flex; align-items:center; overflow:hidden; background:var(--g-hero); }
.hero__grid { position:absolute; inset:0; background-image:linear-gradient(rgba(33,117,109,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(33,117,109,0.035) 1px,transparent 1px); background-size:80px 80px; pointer-events:none; }
.hero__orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px); }
.hero__orb--1 { width:700px; height:700px; background:radial-gradient(circle,rgba(33,117,109,0.22) 0%,transparent 70%); top:-15%; right:-15%; }
.hero__orb--2 { width:500px; height:500px; background:radial-gradient(circle,rgba(101,116,91,0.16) 0%,transparent 70%); bottom:-10%; left:-10%; }
.hero__orb--3 { width:300px; height:300px; background:radial-gradient(circle,rgba(184,83,70,0.1) 0%,transparent 70%); top:40%; left:30%; }

.hero__content { position:relative; z-index:2; width:100%; padding:160px 0 80px; }

.hero__eyebrow {
  display:inline-flex; align-items:center; gap:.75rem; margin-bottom:2rem;
  padding:.5rem 1.1rem; background:rgba(33,117,109,0.1); border:1px solid rgba(33,117,109,0.25);
  border-radius:var(--r-full); backdrop-filter:blur(8px);
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-lt);
  animation:fade-in 1s var(--ease-out-expo) both;
}
.hero__eyebrow-dot { width:6px; height:6px; background:var(--coral); border-radius:50%; box-shadow:0 0 8px var(--coral); animation:pulse-glow 2s ease-in-out infinite; }

.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.25rem,5vw,3.5rem);   /* H1 spec: 36→56px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  margin-bottom: 1.5rem;
  animation: slide-up 1s .2s var(--ease-out-expo) both;
}
.hero__title em {
  font-style: normal;
  position: relative;
  display: inline-block;
  color: var(--teal);
  padding: .04em .38em;
  margin: 0 .05em;
  background: var(--teal-bg);
  border-radius: .5em .6em .55em .45em/.6em .5em .6em .5em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero__title-line:nth-child(2) em { background: var(--coral-bg); color: var(--coral); }
.hero__title-line:nth-child(3) em { background: var(--gold-bg); color: var(--gold); }
.hero__title-line { display:block; overflow:hidden; }

.hero__desc { font-size:clamp(1rem,1.4vw,1.15rem); color:var(--text-muted); max-width:580px; line-height:1.9; margin-bottom:2.5rem; animation:slide-up 1s .35s var(--ease-out-expo) both; }

.hero__tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; animation:slide-up 1s .45s var(--ease-out-expo) both; }
.hero__tag { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .85rem; background:rgba(26,26,26,0.035); border:1px solid var(--border-2); border-radius:var(--r-full); font-size:.78rem; font-weight:500; color:var(--text-muted); backdrop-filter:blur(4px); }
.hero__tag-dot { width:4px; height:4px; border-radius:50%; background:var(--coral); }
.hero__tag-dot--gold  { background:var(--gold); }
.hero__tag-dot--olive { background:var(--olive-lt); }
.hero__tag-dot--slate { background:var(--slate); }

.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:0; animation:slide-up 1s .55s var(--ease-out-expo) both; }

/* ═══════════════════════════════════════
   FIRM SNAPSHOT
═══════════════════════════════════════ */
.snapshot-section { background:var(--ink); border-bottom:1px solid var(--border); }
.snapshot-panel {
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;
  background:var(--g-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:2.5rem; box-shadow:var(--sh-card);
}
.hero__card-label { font-family:var(--f-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-lt); margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem; }
.hero__card-label::before { content:''; width:1rem; height:1px; background:var(--teal); }

.hero__metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.hero__metric-tile {
  padding:1rem .9rem; background:rgba(255,255,255,0.55); border:1px solid var(--border);
  border-radius:var(--r-md); transition:all var(--dur-base) var(--ease-spring);
}
.hero__metric-tile:hover { border-color:rgba(33,117,109,.3); background:var(--teal-bg); transform:translateY(-2px); }
.hero__metric-tile-icon {
  width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center;
  justify-content:center; font-size:.95rem; margin-bottom:.65rem;
}
.hero__metric-icon--teal   { background:rgba(33,117,109,0.15); }
.hero__metric-icon--coral  { background:rgba(184,83,70,0.12); }
.hero__metric-icon--gold   { background:rgba(223,176,44,0.12); }
.hero__metric-icon--olive  { background:rgba(101,116,91,0.12); }
/* Legacy */
.hero__metric-icon--blue   { background:rgba(33,117,109,0.15); }
.hero__metric-icon--violet { background:rgba(101,116,91,0.12); }
.hero__metric-tile-val { font-family:var(--f-sans); font-size:1.5rem; font-weight:800; color:var(--text-bright); letter-spacing:-.03em; line-height:1; margin-bottom:.3rem; }
/* Impact stat callouts — Mustard per spec */
.hero__metric-tile--stat .hero__metric-tile-val { color:var(--mustard); font-size:1.7rem; }
.hero__metric-tile-lbl { font-size:.68rem; color:var(--text-muted); line-height:1.35; font-weight:500; }

/* ═══════════════════════════════════════
   TICKER
═══════════════════════════════════════ */
.ticker-section {
  padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink-2) 50%,var(--ink) 100%);
  overflow:hidden; position:relative;
}
.ticker-section::before,.ticker-section::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.ticker-section::before { left:0; background:linear-gradient(90deg,var(--ink),transparent); }
.ticker-section::after  { right:0; background:linear-gradient(-90deg,var(--ink),transparent); }
.ticker-label { text-align:center; font-family:var(--f-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1.25rem; }
.ticker-track { display:flex; gap:0; animation:ticker 35s linear infinite; width:max-content; }
.ticker-track:hover { animation-play-state:paused; }
.ticker-item { display:inline-flex; align-items:center; gap:.6rem; padding:0 2.5rem; font-size:.82rem; font-weight:600; color:var(--text-dim); white-space:nowrap; transition:color var(--dur-fast); border-right:1px solid var(--border); }
.ticker-item:hover { color:var(--text-muted); }
.ticker-item::before { content:'◆'; font-size:.4rem; color:var(--coral); opacity:.7; }

/* ═══════════════════════════════════════
   INTRO SECTION
═══════════════════════════════════════ */
.intro-section { position:relative; overflow:hidden; }
.intro__bg-text { position:absolute; right:-4rem; top:50%; transform:translateY(-50%); font-family:var(--f-display); font-size:18vw; font-weight:900; color:rgba(26,26,26,0.025); line-height:1; pointer-events:none; user-select:none; letter-spacing:-.05em; }
.intro__grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.intro__image-wrap { position:relative; }
.intro__image-frame { position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; background:var(--surface-3); }
.intro__image-frame::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(33,117,109,0.18) 0%,transparent 60%); z-index:1; }
.intro__image-frame img { width:100%; height:100%; object-fit:cover; object-position:center; }
.intro__badge-float { position:absolute; bottom:-1.5rem; right:-1.5rem; background:var(--g-glass); backdrop-filter:blur(20px); border:1px solid var(--border-3); border-radius:var(--r-lg); padding:1.25rem 1.5rem; min-width:180px; box-shadow:var(--sh-card); animation:float 6s 2s ease-in-out infinite; }
.intro__badge-float .num { font-size:2.2rem; font-weight:800; color:var(--text-bright); letter-spacing:-.05em; background:var(--g-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.intro__badge-float .lbl { font-size:.75rem; color:var(--text-muted); margin-top:.25rem; line-height:1.4; }
.intro__corner-badge { position:absolute; top:-1.5rem; left:-1.5rem; width:80px; height:80px; background:var(--g-brand); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:2rem; box-shadow:var(--sh-teal); animation:float 6s ease-in-out infinite; }
.intro__text p { color:var(--text-muted); font-size:1.02rem; line-height:1.9; margin-bottom:1.25rem; }
.intro__features { display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.intro__feature { display:flex; gap:1rem; padding:1.25rem; background:var(--g-glass); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-md); transition:all var(--dur-base) var(--ease-out-expo); cursor:default; }
.intro__feature:hover { border-color:var(--teal); background:rgba(33,117,109,0.06); transform:translateX(6px); }
.intro__feature-icon { width:42px; height:42px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; transition:transform var(--dur-base) var(--ease-spring); }
.intro__feature:hover .intro__feature-icon { transform:scale(1.1) rotate(5deg); }
.intro__feature-title { font-size:.9rem; font-weight:700; color:var(--text-bright); margin-bottom:.2rem; }
.intro__feature-desc  { font-size:1.1rem; color:var(--text-muted); line-height:1.6; }

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
.services-section { background:var(--ink-2); position:relative; overflow:hidden; }
.services-section::before { content:''; position:absolute; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,rgba(101,116,91,0.05) 0%,transparent 70%); right:-200px; bottom:-200px; pointer-events:none; }
.services__header { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:4rem; }
.services__grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }

.service-card {
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-top:3px solid var(--teal);   /* thematic top-accent (recoloured per card) */
  border-radius:var(--r-md); padding:2rem; overflow:hidden; cursor:default;
  box-shadow:var(--sh-card);
  transition:transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}
/* Left-border colour reveal on hover (0→100% height) */
.service-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--teal); transform:scaleY(0); transform-origin:top; transition:transform var(--dur-base) var(--ease-out-expo); }
.service-card:hover { transform:translateY(-4px); box-shadow:var(--sh-card-hover); }
.service-card:hover::before { transform:scaleY(1); }
/* Thematic colour map: teal=Research/MEL, sage=Climate/DRR, terracotta=Gender/Humanitarian, mustard=Digital/AI */
.service-card--teal, .service-card--blue { border-top-color:var(--teal); }
.service-card--teal::before, .service-card--blue::before { background:var(--teal); }
.service-card--olive, .service-card--violet { border-top-color:var(--sage); }
.service-card--olive::before, .service-card--violet::before { background:var(--sage); }
.service-card--coral { border-top-color:var(--terracotta); }
.service-card--coral::before { background:var(--terracotta); }
.service-card--gold { border-top-color:var(--mustard); }
.service-card--gold::before { background:var(--mustard); }
.service-card__number { font-family:var(--f-mono); font-size:.7rem; font-weight:500; letter-spacing:.15em; color:var(--text-dim); margin-bottom:1.75rem; }
.service-card__icon { width:54px; height:54px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.5rem; transition:all var(--dur-base) var(--ease-out-expo); position:relative; }
.service-card__icon::before { content:''; position:absolute; inset:-2px; border-radius:calc(var(--r-sm)+2px); background:var(--g-brand); opacity:0; transition:opacity var(--dur-base); z-index:-1; }
.service-card:hover .service-card__icon { transform:scale(1.06); }
.service-card:hover .service-card__icon::before { opacity:1; }
.service-card--blue   .service-card__icon { background:rgba(33,117,109,0.15); border:1px solid rgba(33,117,109,0.2); }
.service-card--teal   .service-card__icon { background:rgba(33,117,109,0.15); border:1px solid rgba(33,117,109,0.2); }
.service-card--gold   .service-card__icon { background:rgba(223,176,44,0.12);  border:1px solid rgba(223,176,44,0.2); }
.service-card--coral  .service-card__icon { background:rgba(184,83,70,0.12);   border:1px solid rgba(184,83,70,0.2); }
.service-card--olive  .service-card__icon { background:rgba(101,116,91,0.12);   border:1px solid rgba(101,116,91,0.2); }
.service-card--violet .service-card__icon { background:rgba(101,116,91,0.12);   border:1px solid rgba(101,116,91,0.2); }
.service-card__title { font-size:1.05rem; font-weight:700; color:var(--text-bright); margin-bottom:.75rem; letter-spacing:-.01em; }
.service-card__desc  { font-size:1.1rem; color:var(--text-muted); line-height:1.75; }
.service-card__tags  { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.5rem; }
.service-card__tag   { padding:.2rem .6rem; background:rgba(26,26,26,.045); border:1px solid var(--border); border-radius:var(--r-full); font-size:.68rem; font-weight:600; color:var(--text-dim); letter-spacing:.04em; }
.service-card__link  { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.5rem; font-size:.85rem; font-weight:700; color:var(--teal); }
.service-card__link .arrow { transition:transform var(--dur-base) var(--ease-out-expo); }
.service-card:hover .service-card__link .arrow { transform:translateX(4px); }

/* ═══════════════════════════════════════
   HUB CARD (image/icon-card grid with "Find out more" link)
═══════════════════════════════════════ */
.hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.hub-card {
  display:flex; flex-direction:column; background:var(--g-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:2rem; transition:all var(--dur-base) var(--ease-out-expo);
}
.hub-card:hover { transform:translateY(-4px); border-color:rgba(33,117,109,.3); box-shadow:var(--sh-card); }
.hub-card__icon { width:54px; height:54px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem; }
.hub-card__title { font-size:1.1rem; font-weight:700; color:var(--text-bright); margin-bottom:.6rem; letter-spacing:-.01em; }
.hub-card__desc { font-size:.95rem; color:var(--text-muted); line-height:1.65; margin-bottom:1.25rem; flex:1; }
.hub-card__link { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700; color:var(--teal); }
.hub-card__link .arrow { transition:transform var(--dur-base) var(--ease-out-expo); }
.hub-card:hover .hub-card__link .arrow { transform:translateX(4px); }

/* ═══════════════════════════════════════
   STATS SECTION
═══════════════════════════════════════ */
.stats-section {
  background:linear-gradient(135deg,rgba(33,117,109,0.07) 0%,rgba(101,116,91,0.04) 100%);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.stats-section::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(33,117,109,0.1) 0%,transparent 70%); left:-100px; top:-100px; animation:pulse-glow 6s ease-in-out infinite; }
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); position:relative; z-index:1; }
.stat-box { padding:4rem 2rem; text-align:center; border-right:1px solid var(--border); position:relative; overflow:hidden; transition:background var(--dur-base); }
.stat-box:last-child { border-right:none; }
.stat-box:hover { background:rgba(33,117,109,0.05); }
.stat-box__num { font-family:var(--f-sans); font-size:clamp(2rem,3.5vw,2.8rem); font-weight:900; letter-spacing:-.06em; line-height:1; margin-bottom:.4rem; background:var(--g-primary); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-box__label { font-size:.8rem; color:var(--text-muted); font-weight:500; line-height:1.4; }

/* ═══════════════════════════════════════
   DIRECTORS
═══════════════════════════════════════ */
.directors-hero { padding:170px 0 80px; position:relative; overflow:hidden; }
.directors-hero::before { content:''; position:absolute; inset:0; background:var(--g-hero); }
.directors-hero__grid-lines { position:absolute; inset:0; background-image:linear-gradient(rgba(33,117,109,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(33,117,109,0.04) 1px,transparent 1px); background-size:80px 80px; pointer-events:none; }
.directors-hero__content { position:relative; z-index:2; text-align:center; }
.directors-section { background:var(--ink); }
.directors-intro { text-align:center; margin-bottom:5rem; }
.directors-intro p { font-size:1.05rem; color:var(--text-muted); max-width:720px; margin:0 auto; line-height:1.9; }

/* Card layout */
.directors__featured { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.directors__row      { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }

/* The card */
.dir-card {
  position:relative; background:var(--g-card); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden; transition:all .35s var(--ease-out-expo); cursor:default;
}
.dir-card:hover { transform:translateY(-5px); border-color:rgba(33,117,109,0.35); box-shadow:var(--sh-card); }

/* ── PHOTO — key fix: portrait crop centred on face ── */
.dir-card__photo-wrap { position:relative; overflow:hidden; }
.dir-card--featured  .dir-card__photo-wrap { height:320px; }
.dir-card--standard  .dir-card__photo-wrap { height:260px; }

.dir-card__photo {
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 10%;   /* default: top-centred to show faces */
  transition:transform .7s var(--ease-out-expo), filter .5s;
  filter:grayscale(20%) brightness(0.9);
}

/* Individual photo position overrides for best face crop */
.dir-card--musharrat .dir-card__photo { object-position: center 8%; }
.dir-card--faizul    .dir-card__photo { object-position: center 5%; }
.dir-card--sadiq     .dir-card__photo { object-position: center 10%; }
.dir-card--shaheen   .dir-card__photo { object-position: center 8%; }
.dir-card--farhana   .dir-card__photo { object-position: center 5%; }

.dir-card:hover .dir-card__photo { transform:scale(1.04); filter:grayscale(0%) brightness(1); }

.dir-card__photo-grad { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,11,10,0.95) 0%,rgba(6,11,10,0.5) 40%,rgba(6,11,10,0.1) 70%,transparent 100%); }
.dir-card__photo-side { position:absolute; top:1.25rem; right:1.25rem; display:flex; flex-direction:column; gap:.5rem; }

/* Body */
.dir-card__body  { padding:1.75rem; position:relative; z-index:1; }
.dir-card__role-badge { margin-bottom:.75rem; }
.dir-card__name { font-family:var(--f-sans); font-size:1.35rem; font-weight:800; color:var(--text-bright); letter-spacing:-.03em; margin-bottom:.2rem; }
.dir-card--standard .dir-card__name { font-size:1.15rem; }
.dir-card__title-line { font-size:.88rem; font-weight:600; color:var(--teal-lt); letter-spacing:.06em; text-transform:uppercase; font-family:var(--f-mono); margin-bottom:.85rem; }
.dir-card__institution { font-size:.95rem; color:var(--text-muted); margin-bottom:1rem; font-style:italic; line-height:1.45; }
.dir-card__expertise-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1.1rem; }
.dir-chip { padding:.22rem .7rem; border-radius:var(--r-full); font-size:.8rem; font-weight:600; background:rgba(26,26,26,0.045); border:1px solid var(--border-2); color:var(--text-muted); letter-spacing:.03em; transition:all var(--dur-fast); }
.dir-card:hover .dir-chip { background:rgba(33,117,109,0.1); border-color:rgba(33,117,109,0.25); color:var(--text); }
.dir-card__summary { font-size:1.1rem; color:var(--text-muted); line-height:1.75; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:1.5rem; }
.dir-card--featured .dir-card__summary { -webkit-line-clamp:4; }

/* Footer */
.dir-card__footer { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.75rem; border-top:1px solid var(--border); background:rgba(26,26,26,.02); }
.dir-card__exp { display:flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:700; color:var(--text-dim); font-family:var(--f-mono); }
.dir-card__years-icon { font-size:.9rem; }
.dir-card__exp-bar { width:40px; height:3px; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; }
.dir-card__exp-fill { height:100%; background:var(--g-brand); border-radius:var(--r-full); transition:width 1s var(--ease-out-expo); }
.dir-card__view-btn { display:flex; align-items:center; gap:.5rem; padding:.45rem 1rem; background:rgba(33,117,109,0.1); border:1px solid rgba(33,117,109,0.2); border-radius:var(--r-full); font-size:.75rem; font-weight:700; color:var(--teal-lt); letter-spacing:.03em; transition:all var(--dur-base) var(--ease-out-expo); }
.dir-card__view-btn:hover { background:var(--teal); border-color:var(--teal); color:#fff; transform:translateX(3px); }

/* Highlight line */
.dir-card__highlight { position:absolute; top:0; left:0; right:0; height:3px; background:var(--g-brand); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out-expo); }
.dir-card:hover .dir-card__highlight { transform:scaleX(1); }

/* Card glow */
.dir-card::after { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(33,117,109,0.06) 0%,transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.dir-card:hover::after { opacity:1; }

/* ═══════════════════════════════════════
   DIRECTOR MODAL
═══════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  z-index:2000; display:grid; place-items:center; padding:2rem;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease-in-out);
}
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal {
  width:100%; max-width:860px; max-height:90vh; background:var(--ink-2); border:1px solid var(--border-2);
  border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 30px 90px rgba(16,30,26,.25),var(--sh-teal);
  transform:scale(.93) translateY(30px); transition:transform .4s var(--ease-out-expo); position:relative;
}
.modal-backdrop.open .modal { transform:scale(1) translateY(0); }
.modal__top-bar { height:3px; background:var(--g-brand); background-size:200%; animation:grad-shift 3s linear infinite; }
.modal__layout  { display:grid; grid-template-columns:260px 1fr; min-height:0; flex:1; }
.modal__sidebar { background:var(--surface-2); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.modal__photo-wrap { height:300px; overflow:hidden; position:relative; }
.modal__photo { width:100%; height:100%; object-fit:cover; object-position:center 8%; }
.modal__photo-grad { position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(to top,var(--surface-2),transparent); }
.modal__sidebar-info { padding:1.5rem; flex:1; }
.modal__sidebar-name { font-size:1.05rem; font-weight:800; color:var(--text-bright); letter-spacing:-.02em; margin-bottom:.25rem; }
.modal__sidebar-role { font-size:.7rem; font-weight:700; color:var(--teal-lt); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; font-family:var(--f-mono); }
.modal__sidebar-chips { display:flex; flex-direction:column; gap:.4rem; }
.modal__sidebar-chip { padding:.35rem .7rem; background:rgba(33,117,109,0.1); border:1px solid rgba(33,117,109,0.2); border-radius:var(--r-sm); font-size:.72rem; color:var(--text-muted); line-height:1.4; }
.modal__content { overflow-y:auto; padding:2.5rem; scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent; }
.modal__close { position:absolute; top:1.25rem; right:1.25rem; width:36px; height:36px; background:var(--surface-3); border:1px solid var(--border-2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:1rem; z-index:10; transition:all var(--dur-base) var(--ease-spring); }
.modal__close:hover { background:var(--teal); border-color:var(--teal); color:#fff; transform:rotate(90deg) scale(1.1); }
.modal__sec-title { font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-lt); margin-bottom:1rem; display:flex; align-items:center; gap:.75rem; }
.modal__sec-title::after { content:''; flex:1; height:1px; background:var(--border-2); }
.modal__bio { font-size:1.1rem; color:var(--text-muted); line-height:1.85; margin-bottom:2rem; }
.modal__achievements { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem; }
.modal__achievement { display:flex; gap:.85rem; font-size:1.05rem; color:var(--text-muted); line-height:1.6; padding:.85rem; background:rgba(26,26,26,.025); border:1px solid var(--border); border-radius:var(--r-md); border-left:2px solid var(--teal); transition:all var(--dur-fast); }
.modal__achievement:hover { background:rgba(33,117,109,0.05); border-left-color:var(--coral); }
.modal__timeline { display:flex; flex-direction:column; gap:0; position:relative; padding-left:1.5rem; }
.modal__timeline::before { content:''; position:absolute; left:0; top:.5rem; bottom:.5rem; width:2px; background:linear-gradient(180deg,var(--teal),var(--coral),transparent); }
.modal__t-item { position:relative; padding-bottom:1.5rem; }
.modal__t-item::before { content:''; position:absolute; left:-1.85rem; top:.35rem; width:8px; height:8px; background:var(--teal); border:2px solid var(--ink-2); border-radius:50%; box-shadow:0 0 8px var(--teal-glow); }
.modal__t-period { font-family:var(--f-mono); font-size:.68rem; font-weight:500; color:var(--teal-lt); letter-spacing:.08em; margin-bottom:.25rem; }
.modal__t-role   { font-size:.9rem; font-weight:700; color:var(--text-bright); margin-bottom:.2rem; }
.modal__t-org    { font-size:.8rem; color:var(--text-muted); }

/* ═══════════════════════════════════════
   APPROACH
═══════════════════════════════════════ */
.approach-section { background:var(--ink-2); position:relative; overflow:hidden; }
.approach-section::after { content:''; position:absolute; right:-200px; top:50%; transform:translateY(-50%); width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(184,83,70,0.05) 0%,transparent 70%); pointer-events:none; }
.approach__grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.approach__step { display:flex; gap:1.5rem; padding:1.75rem 0; position:relative; }
.approach__step:not(:last-child)::after { content:''; position:absolute; left:1.25rem; top:4rem; bottom:0; width:1px; background:linear-gradient(180deg,var(--teal),transparent); }
.approach__step-num { width:2.5rem; height:2.5rem; flex-shrink:0; background:var(--surface-3); border:1px solid var(--border-2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.72rem; font-weight:700; color:var(--teal-lt); transition:all var(--dur-base) var(--ease-spring); z-index:1; position:relative; }
.approach__step:hover .approach__step-num { background:var(--g-brand); border-color:transparent; color:#fff; transform:scale(1.15); box-shadow:var(--sh-teal); }
.approach__step-body { flex:1; padding-top:.4rem; }
.approach__step-title { font-size:.95rem; font-weight:700; color:var(--text-bright); margin-bottom:.4rem; }
.approach__step-desc  { font-size:1.1rem; color:var(--text-muted); line-height:1.75; }
.approach__visual { position:relative; }
.approach__morph { width:100%; aspect-ratio:1; background:linear-gradient(135deg,rgba(33,117,109,0.15),rgba(101,116,91,0.1)); border-radius:60% 40% 30% 70%/60% 30% 70% 40%; animation:morph 8s ease-in-out infinite; display:flex; align-items:center; justify-content:center; font-size:8rem; position:relative; }
.approach__morph::before { content:''; position:absolute; inset:10px; border-radius:60% 40% 30% 70%/60% 30% 70% 40%; background:rgba(33,117,109,0.06); animation:morph 8s 1s ease-in-out infinite; }

/* ═══════════════════════════════════════
   MVV SECTION
═══════════════════════════════════════ */
.mvv-section  { background:var(--ink); position:relative; }
.mvv-grid     { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:4rem; }
.mvv-card     { border-radius:var(--r-md); padding:2.5rem; position:relative; overflow:hidden; transition:transform var(--dur-base) var(--ease-out-expo); }
.mvv-card:hover { transform:translateY(-3px); }
.mvv-card--vision  { background:linear-gradient(135deg,rgba(33,117,109,0.1),rgba(33,117,109,0.04)); border:1px solid rgba(33,117,109,0.2); }
.mvv-card--mission { background:linear-gradient(135deg,rgba(223,176,44,0.1),rgba(223,176,44,0.04)); border:1px solid rgba(223,176,44,0.2); }
.mvv-card--values  { background:linear-gradient(135deg,rgba(184,83,70,0.1),rgba(184,83,70,0.04)); border:1px solid rgba(184,83,70,0.2); }
.mvv-card__number  { font-family:var(--f-mono); font-size:4rem; font-weight:900; line-height:1; margin-bottom:1rem; opacity:.08; position:absolute; right:1.5rem; top:1rem; }
.mvv-card--vision  .mvv-card__number { color:var(--teal); }
.mvv-card--mission .mvv-card__number { color:var(--gold); }
.mvv-card--values  .mvv-card__number { color:var(--coral); }
.mvv-card__icon    { font-size:2.5rem; margin-bottom:1.25rem; display:block; }
.mvv-card__label   { font-family:var(--f-mono); font-size:.65rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.75rem; }
.mvv-card--vision  .mvv-card__label { color:var(--teal-lt); }
.mvv-card--mission .mvv-card__label { color:var(--gold-lt); }
.mvv-card--values  .mvv-card__label { color:var(--coral-lt); }
.mvv-card__text    { font-size:1.1rem; color:var(--text-muted); line-height:1.85; }
.mvv-values-list   { display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; }
.mvv-value-item    { display:grid; grid-template-columns:auto 1fr; gap:.6rem; font-size:1.1rem; color:var(--text-muted); align-items:baseline; }
.mvv-value-item strong { color:var(--text); }
.mvv-value-item::before { content:'▸'; color:var(--teal-lt); font-size:.65rem; }

/* ═══════════════════════════════════════
   CLIENTS
═══════════════════════════════════════ */
.clients-section { background:var(--ink-2); }
.clients-grid    { display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; margin-top:4rem; }
.client-cat { background:var(--g-card); border:1px solid var(--border); border-radius:var(--r-md); padding:2rem; transition:all var(--dur-base) var(--ease-out-expo); }
.client-cat:hover { border-color:var(--border-2); transform:translateY(-4px); box-shadow:var(--sh-card); }
.client-cat__header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.client-cat__icon   { width:36px; height:36px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.client-cat__title  { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.client-cat__list   { display:flex; flex-direction:column; gap:.45rem; }
.client-cat__item   { font-size:.82rem; color:var(--text-dim); padding:.3rem 0; border-bottom:1px solid var(--border); transition:color var(--dur-fast); display:flex; align-items:center; gap:.5rem; }
.client-cat__item:last-child { border-bottom:none; }
.client-cat__item:hover { color:var(--text-muted); }
.client-cat__item::before { content:'·'; color:var(--teal-lt); font-size:1.2rem; line-height:0; }

/* ═══════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════ */
.cta-section { background:var(--ink); padding:3rem 0; }
.cta-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(33,117,109,0.12) 0%,rgba(101,116,91,0.08) 50%,rgba(184,83,70,0.08) 100%);
  border:1px solid rgba(33,117,109,0.2); border-radius:var(--r-2xl); padding:5rem 4rem; text-align:center;
}
.cta-banner::before { content:''; position:absolute; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,rgba(33,117,109,0.15) 0%,transparent 60%); top:50%; left:50%; transform:translate(-50%,-50%); animation:pulse-glow 5s ease-in-out infinite; pointer-events:none; }
.cta-banner__title { font-family:var(--f-display); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:700; color:var(--text-bright); margin-bottom:1rem; position:relative; }
.cta-banner__desc  { font-size:1.1rem; color:var(--text-muted); max-width:560px; margin:0 auto 2.5rem; line-height:1.85; position:relative; }
.cta-banner__actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; }

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-section { background:var(--ink-2); }
.contact__layout  { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
.contact__info-items { display:flex; flex-direction:column; gap:0; margin-top:2rem; }
.contact__info-item  { display:flex; gap:1.25rem; padding:1.5rem 0; border-bottom:1px solid var(--border); transition:padding-left var(--dur-base) var(--ease-out-expo); }
.contact__info-item:hover { padding-left:.5rem; }
.contact__info-item:last-child { border-bottom:none; }
.contact__info-icon { width:44px; height:44px; flex-shrink:0; background:var(--surface-3); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:all var(--dur-base) var(--ease-spring); }
.contact__info-item:hover .contact__info-icon { background:var(--g-brand); transform:scale(1.1); }
.contact__info-label { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.3rem; }
.contact__info-value { font-size:1.1rem; color:var(--text); line-height:1.5; }
.contact__info-value a:hover { color:var(--teal-lt); }
.contact__form-wrap { background:var(--g-card); border:1px solid var(--border); border-radius:var(--r-2xl); padding:3rem; position:relative; overflow:hidden; }
.contact__form-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(33,117,109,0.4),transparent); }
.form-group { margin-bottom:1.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.6rem; }
.form-control { width:100%; padding:.95rem 1.1rem; background:var(--ink-3); border:1px solid var(--border-2); border-radius:var(--r-md); color:var(--text-bright); font-family:var(--f-sans); font-size:1.05rem; outline:none; transition:all var(--dur-base) var(--ease-out-expo); -webkit-appearance:none; }
.form-control::placeholder { color:var(--text-dim); }
.form-control:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(33,117,109,0.18),var(--sh-inset); background:var(--ink-2); }
textarea.form-control { min-height:140px; resize:vertical; }

/* Vendor pre-qualification callout */
.prequal-box {
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--teal-bg); border:1px solid rgba(33,117,109,0.25);
  border-left:4px solid var(--teal); border-radius:var(--r-md);
  padding:1.25rem 1.4rem; margin-bottom:2rem;
}
.prequal-box__icon { font-size:1.5rem; line-height:1; flex-shrink:0; }
.prequal-box__title { font-size:.95rem; font-weight:700; color:var(--teal); margin-bottom:.35rem; }
.prequal-box__text { font-size:.9rem; color:var(--text); line-height:1.6; }

/* Google Map embed */
.map-embed { position:relative; width:100%; aspect-ratio:16/7; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); box-shadow:var(--sh-card); }
.map-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(0.2); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer { background:var(--ink); border-top:1px solid var(--border); padding:6rem 0 2.5rem; position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--teal),var(--coral),var(--gold),transparent); }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; margin-bottom:5rem; }
.footer__brand-desc { font-size:1.05rem; color:var(--text-dim); line-height:1.8; margin:1.25rem 0 2rem; max-width:340px; }
.footer__social { display:flex; gap:.75rem; }
.footer__social-link { width:38px; height:38px; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; transition:all var(--dur-base) var(--ease-spring); }
.footer__social-link:hover { background:var(--g-brand); border-color:transparent; transform:translateY(-3px) scale(1.1); box-shadow:var(--sh-teal); }
.footer__col-title { font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1.5rem; }
.footer__links { display:flex; flex-direction:column; gap:.7rem; }
.footer__link  { font-size:.875rem; color:var(--text-dim); transition:color var(--dur-fast); display:flex; align-items:center; gap:.5rem; }
.footer__link::before { content:'→'; font-size:.7rem; opacity:0; transition:opacity var(--dur-fast); color:var(--teal-lt); }
.footer__link:hover { color:var(--text); }
.footer__link:hover::before { opacity:1; }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; padding-top:2rem; border-top:1px solid var(--border); font-size:.8rem; color:var(--text-dim); flex-wrap:wrap; gap:1rem; }
.footer__reg { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.footer__reg-sep { color:var(--border-3); }

/* ═══════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal--left   { transform:translateX(-40px); }
.reveal--right  { transform:translateX(40px); }
.reveal--left.visible, .reveal--right.visible { transform:translateX(0); }
.reveal--scale  { transform:scale(.92) translateY(20px); }
.reveal--scale.visible { transform:scale(1) translateY(0); }
.delay-1{transition-delay:.1s} .delay-2{transition-delay:.2s} .delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s} .delay-5{transition-delay:.5s} .delay-6{transition-delay:.6s}

/* ═══════════════════════════════════════
   MISC UTILS
═══════════════════════════════════════ */
.mt-sm{margin-top:1rem} .mt-md{margin-top:2rem} .mt-lg{margin-top:3rem}
.mb-sm{margin-bottom:1rem} .mb-md{margin-bottom:2rem}

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--ink-2); }
::-webkit-scrollbar-thumb { background:rgba(26,26,26,0.18); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--teal); }

/* Focus & Selection */
::selection { background:rgba(33,117,109,0.3); color:var(--text-bright); }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:1200px) {
  .directors__featured { grid-template-columns:1fr; }
  .directors__row      { grid-template-columns:1fr 1fr; }
  .clients-grid        { grid-template-columns:1fr 1fr; }
  .stats-grid          { grid-template-columns:repeat(3,1fr); }
  .services__grid      { grid-template-columns:1fr 1fr; }
  .hub-grid             { grid-template-columns:1fr 1fr; }
  .footer__grid        { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media (max-width:1024px) {
  .intro__grid,.approach__grid,.contact__layout { grid-template-columns:1fr; gap:3rem; }
  .services__header { grid-template-columns:1fr; gap:1.5rem; }
  .mvv-grid { grid-template-columns:1fr; }
  .modal__layout { grid-template-columns:1fr; }
  .modal__sidebar { flex-direction:row; }
  .modal__photo-wrap { width:200px; height:200px; flex-shrink:0; }
  .snapshot-panel { grid-template-columns:1fr; gap:1.5rem; }
}
@media (max-width:768px) {
  .info-bar { display:none; }
  .nav { top:0; }
  .nav__links { display:none; }
  .nav__hamburger { display:flex; }
  .services__grid { grid-template-columns:1fr; }
  .hub-grid { grid-template-columns:1fr; }
  .directors__featured,.directors__row { grid-template-columns:1fr; }
  .clients-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .hero__metric-grid { grid-template-columns:1fr 1fr; }
  .footer__grid { grid-template-columns:1fr; gap:2rem; }
  .footer__bottom { flex-direction:column; text-align:center; }
  .form-row { grid-template-columns:1fr; }
  .cta-banner { padding:3rem 2rem; }
  .modal__sidebar { flex-direction:column; }
  .modal__photo-wrap { width:100%; }
  .modal__layout { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .stats-grid  { grid-template-columns:1fr; }
  .section     { padding:5rem 0; }
  .section--lg { padding:6rem 0; }
  .container   { padding:0 1.25rem; }
}