/* ==========================================================
   CG FOUNDATION — style.css
   Global styles, CSS variables, typography, utilities
   ========================================================== */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Brand Colors */
  --cgf-primary:       #1e6b3a;   /* Deep forest green */
  --cgf-primary-dark:  #145228;
  --cgf-primary-light: #2d8c50;
  --cgf-secondary:     #f5a623;   /* Golden accent */
  --cgf-accent:        #e85d26;   /* Warm orange-red */
  --cgf-teal:          #0d9488;   /* Teal highlight */

  /* Neutral Palette */
  --cgf-dark:          #0f1f14;
  --cgf-dark-2:        #1a2e1e;
  --cgf-gray-900:      #111827;
  --cgf-gray-800:      #1f2937;
  --cgf-gray-700:      #374151;
  --cgf-gray-600:      #4b5563;
  --cgf-gray-500:      #6b7280;
  --cgf-gray-400:      #9ca3af;
  --cgf-gray-300:      #d1d5db;
  --cgf-gray-200:      #e5e7eb;
  --cgf-gray-100:      #f3f4f6;
  --cgf-white:         #ffffff;

  /* Semantic Colors */
  --cgf-success:       #22c55e;
  --cgf-warning:       #f59e0b;
  --cgf-danger:        #ef4444;
  --cgf-info:          #3b82f6;

  /* Typography */
  --font-heading:      'Montserrat', sans-serif;
  --font-body:         'Poppins', sans-serif;
  --font-ui:           'Inter', sans-serif;

  /* Spacing */
  --section-py:        50px;
  --section-py-sm:     40px;
  --container-max:     1320px;

  /* Border Radius */
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         20px;
  --radius-xl:         32px;
  --radius-full:       9999px;

  /* Shadows */
  --shadow-sm:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:         0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:         0 10px 40px rgba(0,0,0,.14);
  --shadow-xl:         0 25px 60px rgba(0,0,0,.18);
  --shadow-primary:    0 8px 30px rgba(30,107,58,.30);
  --shadow-card:       0 2px 20px rgba(0,0,0,.08);

  /* Transitions */
  --transition-fast:   .15s ease;
  --transition-base:   .3s ease;
  --transition-slow:   .5s ease;
  --transition-spring: .4s cubic-bezier(.34,1.56,.64,1);

  /* Z-Index Scale */
  --z-dropdown:        1000;
  --z-sticky:          1020;
  --z-fixed:           1030;
  --z-modal:           1050;
  --z-popover:         1060;
  --z-tooltip:         1070;
  --z-cursor:          9999;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--cgf-gray-700);
  background: var(--cgf-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography Scale ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cgf-gray-900);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.375rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--cgf-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--cgf-primary-dark); }

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

/* ── Section Spacing ── */
.section-py     { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-py-sm  { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }
.section-pt     { padding-top: var(--section-py); }
.section-pb     { padding-bottom: var(--section-py); }

/* ── Section Labels ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cgf-primary);
  margin-bottom: 1rem;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--cgf-primary);
  border-radius: 2px;
}

.section-heading {
  margin-bottom: .75rem;
}
.section-subheading {
  font-size: 1.0625rem;
  color: var(--cgf-gray-500);
  max-width: 600px;
  line-height: 1.7;
}
.section-subheading.mx-auto { text-align: center; }

/* ── Highlight Text ── */
.text-primary   { color: var(--cgf-primary) !important; }
.text-secondary { color: var(--cgf-secondary) !important; }
.text-accent    { color: var(--cgf-accent) !important; }
.text-teal      { color: var(--cgf-teal) !important; }

/* ── Buttons ── */
.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.btn:hover::after { opacity: 1; }

.btn-primary {
  background: var(--cgf-primary);
  border-color: var(--cgf-primary);
  color: #fff;
  padding: .75rem 1.75rem;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: var(--cgf-primary-dark);
  border-color: var(--cgf-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(30,107,58,.40);
  color: #fff;
}

.btn-outline-primary {
  border: 2px solid var(--cgf-primary);
  color: var(--cgf-primary);
  padding: .7rem 1.75rem;
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--cgf-primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn-white {
  background: #fff;
  color: var(--cgf-primary);
  padding: .75rem 1.75rem;
  box-shadow: var(--shadow-md);
}
.btn-white:hover {
  background: var(--cgf-gray-100);
  transform: translateY(-2px);
  color: var(--cgf-primary-dark);
}

.btn-accent {
  background: var(--cgf-secondary);
  color: var(--cgf-dark);
  padding: .75rem 1.75rem;
  border-color: var(--cgf-secondary);
}
.btn-accent:hover {
  background: #e09a1c;
  transform: translateY(-2px);
  color: var(--cgf-dark);
}

.btn-lg { padding: .9rem 2.25rem; font-size: 1.0625rem; }
.btn-sm { padding: .5rem 1.25rem; font-size: .875rem; }

/* Ripple effect */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: scale(0);
  animation: ripple-anim .6s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Cards ── */
.cgf-card {
  background: var(--cgf-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.cgf-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card-img-wrapper {
  overflow: hidden;
  position: relative;
}
.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.cgf-card:hover .card-img-wrapper img {
  transform: scale(1.06);
}

/* ── Badge ── */
.cgf-badge {
  display: inline-flex;
  align-items: center;
  padding: .3rem .85rem;
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cgf-badge-primary { background: rgba(30,107,58,.1); color: var(--cgf-primary); }
.cgf-badge-secondary { background: rgba(245,166,35,.12); color: #c27d00; }
.cgf-badge-accent { background: rgba(232,93,38,.1); color: var(--cgf-accent); }
.cgf-badge-teal { background: rgba(13,148,136,.1); color: var(--cgf-teal); }
.cgf-badge-white { background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(4px); }

/* ── Glassmorphism ── */
.glass {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.2);
}
.glass-dark {
  background: rgba(15,31,20,.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
}

/* ── Background Utilities ── */
.bg-primary-subtle  { background: rgba(30,107,58,.06); }
.bg-primary-light   { background: var(--cgf-primary-light); }
.bg-dark-section    { background: var(--cgf-dark-2); }
.bg-gray-section    { background: var(--cgf-gray-100); }

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--cgf-primary) 0%, var(--cgf-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Divider ── */
.cgf-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cgf-gray-200), transparent);
  border: none;
  margin: 0;
}

/* ── Back to Top ── */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  background: var(--cgf-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 999;
  box-shadow: var(--shadow-primary);
}
#backToTop.show { opacity: 1; transform: translateY(0); }
#backToTop:hover { background: var(--cgf-primary-dark); transform: translateY(-4px); }

/* ── Custom Cursor ── */
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--cgf-primary);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%,-50%);
  transition: transform .1s ease;
}
.cursor-ring {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(30,107,58,.4);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%,-50%);
  transition: transform .15s ease, width .3s ease, height .3s ease, border-color .3s ease;
}
.cursor-ring.hover { width: 48px; height: 48px; border-color: var(--cgf-primary); }

/* ── Cookie Banner ── */
#cookieBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cgf-gray-900);
  color: #fff;
  padding: 1.25rem 2rem;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
#cookieBanner p { margin: 0; font-size: .875rem; color: var(--cgf-gray-300); }
#cookieBanner a { color: var(--cgf-secondary); }
.cookie-actions { display: flex; gap: .75rem; flex-shrink: 0; }

/* ── Breadcrumb ── */
.cgf-breadcrumb {
  padding: 1rem 0;
  font-size: .875rem;
}
.cgf-breadcrumb .breadcrumb {
  background: none;
  margin: 0;
  padding: 0;
}
.cgf-breadcrumb .breadcrumb-item a {
  color: var(--cgf-gray-500);
  transition: color var(--transition-fast);
}
.cgf-breadcrumb .breadcrumb-item a:hover { color: var(--cgf-primary); }
.cgf-breadcrumb .breadcrumb-item.active { color: var(--cgf-primary); font-weight: 500; }
.cgf-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--cgf-gray-400); }

/* ── Page Hero Banner (inner pages) ── */
.page-hero {
  background: linear-gradient(135deg, var(--cgf-dark) 0%, var(--cgf-dark-2) 100%);
  padding: 30px 0 30px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e6b3a' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity: .6;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(2rem,4vw,3rem); }
.page-hero .lead { color: rgba(255,255,255,.7); font-size: 1.0625rem; max-width: 600px; }

/* ── Newsletter Popup ── */
#newsletterPopup .modal-content {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: none;
}
#newsletterPopup .modal-body {
  padding: 0;
}
.newsletter-popup-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.newsletter-popup-img {
  background: linear-gradient(135deg, var(--cgf-primary) 0%, var(--cgf-teal) 100%);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.newsletter-popup-form { padding: 3rem; }

/* ── Lazy Load ── */
img[data-src] { opacity: 0; transition: opacity .4s ease; }
img.loaded    { opacity: 1; }

/* ── Loading Skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--cgf-gray-200) 25%, var(--cgf-gray-100) 50%, var(--cgf-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }

/* ── Utility Classes ── */
.fw-300  { font-weight: 300; }
.fw-400  { font-weight: 400; }
.fw-500  { font-weight: 500; }
.fw-600  { font-weight: 600; }
.fw-700  { font-weight: 700; }
.fw-800  { font-weight: 800; }
.fw-900  { font-weight: 900; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-ui      { font-family: var(--font-ui); }

.ls-wide  { letter-spacing: .1em; }
.ls-wider { letter-spacing: .15em; }
.lh-tight { line-height: 1.3; }
.lh-base  { line-height: 1.7; }

.rounded-xl  { border-radius: var(--radius-xl) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-md  { border-radius: var(--radius-md) !important; }
.rounded-sm  { border-radius: var(--radius-sm) !important; }
.rounded-pill{ border-radius: var(--radius-full) !important; }

/* ── Overlay Utilities ── */
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.overlay-dark        { background: rgba(15,31,20,.6); }
.overlay-dark-heavy  { background: rgba(10,20,14,.75); }
.overlay-primary     { background: linear-gradient(to right, rgba(30,107,58,.85) 0%, rgba(30,107,58,.4) 100%); }
.overlay-gradient    { background: linear-gradient(to bottom, transparent 30%, rgba(10,20,14,.8) 100%); }

/* ── Horizontal Scroll Snap ── */
.scroll-x-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: .5rem;
}
.scroll-x-container::-webkit-scrollbar { display: none; }
.scroll-x-container > * { scroll-snap-align: start; flex-shrink: 0; }

/* ── Read Progress Bar ── */
#readProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--cgf-primary);
  z-index: 9999;
  transition: width .1s linear;
}

/* ── Tag Cloud ── */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-item {
  padding: .35rem .9rem;
  background: var(--cgf-gray-100);
  border-radius: var(--radius-full);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--cgf-gray-600);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.tag-item:hover, .tag-item.active {
  background: var(--cgf-primary);
  color: #fff;
}

/* ── Search Overlay ── */
#searchOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,14,.95);
  backdrop-filter: blur(10px);
  z-index: 1055;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}
#searchOverlay.active { opacity: 1; visibility: visible; }
.search-overlay-inner { width: 100%; max-width: 700px; padding: 0 1.5rem; }
.search-overlay-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,.2);
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  padding: 1rem 0;
  outline: none;
  transition: border-color var(--transition-base);
}
.search-overlay-input::placeholder { color: rgba(255,255,255,.3); }
.search-overlay-input:focus { border-bottom-color: var(--cgf-primary); }
.search-close-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.search-close-btn:hover { color: var(--cgf-secondary); }
.search-suggestions { margin-top: 2rem; }
.search-suggestions h6 {
  color: rgba(255,255,255,.4);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: color var(--transition-fast);
  font-size: 1rem;
}
.suggestion-item:hover { color: #fff; }
.suggestion-item i { color: var(--cgf-primary); font-size: 1rem; }


/* ------------------  Career page   -------------------------*/

.careers-hero { background:linear-gradient(135deg,var(--cgf-dark) 0%,var(--cgf-dark-2) 100%);padding:110px 0 70px;position:relative;overflow:hidden; }
.careers-hero::before { content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231e6b3a' fill-opacity='0.07'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E") repeat; }
.careers-hero .container { position:relative;z-index:1; }
/* Filter tabs */
.dept-filter { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem; }
.dept-btn { padding:.45rem 1.1rem;border-radius:var(--radius-full);font-size:.8125rem;font-weight:600;font-family:var(--font-ui);border:1.5px solid var(--cgf-gray-300);color:var(--cgf-gray-600);background:transparent;cursor:pointer;transition:all .2s ease; }
.dept-btn.active,.dept-btn:hover { background:var(--cgf-primary);border-color:var(--cgf-primary);color:#fff; }
/* Job card */
.job-card { background:#fff;border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-card);border:1px solid var(--cgf-gray-200);transition:all .3s ease;height:100%; }
.job-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(30,107,58,.2); }
.job-dept-tag { display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:var(--cgf-primary);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.625rem; }
.job-title { font-size:1.125rem;font-weight:800;font-family:var(--font-heading);color:var(--cgf-gray-900);margin-bottom:.875rem;line-height:1.35;transition:color .2s ease; }
.job-card:hover .job-title { color:var(--cgf-primary); }
.job-meta { display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem; }
.job-meta span { display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;color:var(--cgf-gray-500);font-family:var(--font-ui); }
.job-meta span i { color:var(--cgf-primary);font-size:.8rem; }
.job-excerpt { font-size:.875rem;color:var(--cgf-gray-600);line-height:1.65;margin-bottom:1.5rem; }
.job-footer { display:flex;align-items:center;justify-content:space-between;padding-top:1.25rem;border-top:1px solid var(--cgf-gray-200); }
.job-deadline { font-size:.78rem;color:var(--cgf-gray-500);font-family:var(--font-ui); }
/* Culture cards */
.culture-card { background:#fff;border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-card);border:1px solid var(--cgf-gray-200);text-align:center;height:100%;transition:all .3s ease; }
.culture-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg); }
.culture-icon { width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 1.25rem;transition:all .3s ease; }
.culture-card:hover .culture-icon { transform:scale(1.1) rotate(5deg); }
/* Benefits */
.benefit-item { display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-card);border:1px solid var(--cgf-gray-200);height:100%; }
.benefit-icon { width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0; }
/* Testimonial strip */
.employee-card { background:#fff;border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-card);border:1px solid var(--cgf-gray-200); }
.employee-card blockquote { font-style:italic;color:var(--cgf-gray-600);font-size:.9375rem;line-height:1.75;margin-bottom:1.25rem; }
.employee-meta { display:flex;align-items:center;gap:.875rem; }
.employee-meta img { width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid rgba(30,107,58,.15); }
.employee-name { font-weight:700;font-size:.9375rem;margin-bottom:.15rem; }
.employee-role { font-size:.78rem;color:var(--cgf-primary);font-family:var(--font-ui); }
/* Stats band */
.careers-stat { text-align:center;padding:1.5rem; }
.careers-stat .num { font-family:var(--font-heading);font-size:2.5rem;font-weight:800;color:var(--cgf-secondary);line-height:1;margin-bottom:.4rem; }
.careers-stat .lbl { font-size:.8rem;color:rgba(255,255,255,.7);font-family:var(--font-ui); 


/*------------------------ About Us page css --------------------------*/

 /* ── About Page Specific Styles ── */

    /* Mission Cards */
    .mission-card {
      background: #fff; border-radius: var(--radius-xl);
      padding: 2.5rem; box-shadow: var(--shadow-card);
      border: 1px solid var(--cgf-gray-200); height: 100%;
      transition: all .3s ease; position: relative; overflow: hidden;
    }
    .mission-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 4px; background: linear-gradient(90deg, var(--cgf-primary), var(--cgf-teal));
      transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
    }
    .mission-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .mission-card:hover::before { transform: scaleX(1); }
    .mission-card-icon {
      width: 64px; height: 64px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; margin-bottom: 1.5rem; transition: all .3s ease;
    }
    .mission-card:hover .mission-card-icon { transform: scale(1.1) rotate(5deg); }
    .mission-card h4 { font-size: 1.125rem; margin-bottom: .75rem; }
    .mission-card p { font-size: .9rem; color: var(--cgf-gray-500); line-height: 1.7; margin: 0; }

    /* Impact Grid (Cropin-inspired mosaic) */
    .impact-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 1rem; }
    .mosaic-item { border-radius: var(--radius-lg); overflow: hidden; position: relative; transition: transform .3s ease; }
    .mosaic-item:hover { transform: scale(1.02); }
    .mosaic-item img { width: 100%; height: 100%; object-fit: cover; }
    .mosaic-item.tall { grid-row: span 2; }
    .mosaic-item.wide { grid-column: span 2; }
    .mosaic-stat {
      background: var(--cgf-primary); display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 2rem; text-align: center; min-height: 160px;
    }
    .mosaic-stat .num { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 800; color: #fff; line-height: 1; }
    .mosaic-stat .lbl { font-size: .8rem; color: rgba(255,255,255,.75); font-family: var(--font-ui); margin-top: .4rem; }
    .mosaic-stat.teal { background: var(--cgf-teal); }
    .mosaic-stat.dark { background: var(--cgf-dark-2); }

    /* Values section */
    .value-item {
      display: flex; align-items: flex-start; gap: 1.25rem;
      padding: 1.5rem; border-radius: var(--radius-lg);
      transition: background .2s ease;
    }
    .value-item:hover { background: var(--cgf-gray-100); }
    .value-num {
      font-family: var(--font-heading); font-size: 2rem; font-weight: 900;
      color: rgba(30,107,58,.15); line-height: 1; flex-shrink: 0; width: 40px;
    }
    .value-title { font-size: 1rem; font-weight: 700; color: var(--cgf-gray-900); margin-bottom: .35rem; }
    .value-desc { font-size: .875rem; color: var(--cgf-gray-500); line-height: 1.65; margin: 0; }

    /* Team grid */
    .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }

    /* Partners logos */
    .partners-logo-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.5rem;
    }
    .partner-logo-item {
      background: var(--cgf-gray-100); border-radius: var(--radius-md);
      padding: 1.25rem; display: flex; align-items: center; justify-content: center;
      height: 80px; transition: all .25s ease; filter: grayscale(1); opacity: .6;
    }
    .partner-logo-item:hover { filter: grayscale(0); opacity: 1; background: #fff; box-shadow: var(--shadow-md); }
    .partner-logo-item span {
      font-family: var(--font-heading); font-size: .875rem; font-weight: 800;
      color: var(--cgf-gray-600); text-align: center;
    }

    /* Awards */
    .award-card {
      background: #fff; border-radius: var(--radius-lg); padding: 1.75rem;
      box-shadow: var(--shadow-card); border: 1px solid var(--cgf-gray-200);
      display: flex; align-items: flex-start; gap: 1.25rem; transition: all .3s ease;
    }
    .award-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .award-icon {
      width: 56px; height: 56px; background: rgba(245,166,35,.12);
      border-radius: 14px; display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; color: var(--cgf-secondary); flex-shrink: 0;
    }
    .award-year { font-size: .75rem; font-weight: 700; color: var(--cgf-secondary); font-family: var(--font-ui); margin-bottom: .3rem; }
    .award-title { font-size: .9375rem; font-weight: 700; color: var(--cgf-gray-900); margin-bottom: .3rem; }
    .award-body { font-size: .8125rem; color: var(--cgf-gray-500); margin: 0; }

    @media (max-width: 991.98px) {
      .impact-mosaic { grid-template-columns: repeat(2, 1fr); }
      .mosaic-item.tall { grid-row: span 1; }
      .mosaic-item.wide { grid-column: span 2; }
    }
    @media (max-width: 575.98px) {
      .impact-mosaic { grid-template-columns: 1fr 1fr; gap: .625rem; }
      .mosaic-stat .num { font-size: 1.625rem; }
    }

    /* ════════════════════════════════════════
       OTHER ESTABLISHMENTS — Concept 1: Premium Corporate Cards
    ════════════════════════════════════════ */
    .estab-c1-card {
      background: #fff;
      border-radius: var(--radius-xl);
      border: 1px solid var(--cgf-gray-200);
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: transform .35s ease, box-shadow .35s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .estab-c1-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }
    .estab-c1-banner {
      height: 6px;
      width: 100%;
    }
    .estab-c1-logo-area {
      padding: 2rem 2rem 1rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .estab-c1-logo-icon {
      width: 60px; height: 60px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      color: #fff;
      flex-shrink: 0;
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1rem;
      letter-spacing: -.03em;
    }
    .estab-c1-org-name {
      font-family: var(--font-heading);
      font-size: 1.125rem;
      font-weight: 800;
      color: var(--cgf-gray-900);
      line-height: 1.2;
    }
    .estab-c1-url {
      font-size: .78rem;
      color: var(--cgf-gray-400);
      font-family: var(--font-ui);
      margin-top: .15rem;
    }
    .estab-c1-body {
      padding: .5rem 2rem 1.5rem;
      flex: 1;
    }
    .estab-c1-desc {
      font-size: .9rem;
      color: var(--cgf-gray-500);
      line-height: 1.75;
      margin: 0;
    }
    .estab-c1-footer {
      padding: 1.25rem 2rem 1.75rem;
      border-top: 1px solid var(--cgf-gray-100);
    }
    .estab-c1-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: .65rem 1.5rem;
      border-radius: var(--radius-full);
      font-size: .875rem;
      font-weight: 600;
      font-family: var(--font-ui);
      text-decoration: none;
      transition: all .25s ease;
      border: 2px solid;
    }
    body.dark-mode .estab-c1-card {
      background: var(--cgf-dark-2);
      border-color: rgba(255,255,255,.07);
    }
    body.dark-mode .estab-c1-org-name { color: #fff; }
    body.dark-mode .estab-c1-footer { border-top-color: rgba(255,255,255,.07); }

    /* ════════════════════════════════════════
       OTHER ESTABLISHMENTS — Concept 2: Ecosystem / Timeline
    ════════════════════════════════════════ */
    .ecosystem-section { background: linear-gradient(135deg, var(--cgf-gray-900) 0%, var(--cgf-dark-2) 100%); }
    .eco-hub {
      width: 100px; height: 100px;
      background: linear-gradient(135deg, var(--cgf-primary), var(--cgf-teal));
      border-radius: 50%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      color: #fff;
      margin: 0 auto 2rem;
      box-shadow: 0 0 0 12px rgba(30,107,58,.15), 0 0 0 24px rgba(30,107,58,.07);
    }
    .eco-hub-label {
      font-family: var(--font-heading);
      font-size: .7rem;
      font-weight: 800;
      text-align: center;
      line-height: 1.2;
      letter-spacing: -.01em;
    }
    .eco-node {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
      border-radius: var(--radius-xl);
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all .3s ease;
      height: 100%;
      position: relative;
    }
    .eco-node:hover {
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.25);
      transform: translateY(-4px);
    }
    .eco-node-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .eco-node-name {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: .5rem;
    }
    .eco-node-url {
      font-size: .75rem;
      font-family: var(--font-ui);
      color: rgba(255,255,255,.4);
      margin-bottom: 1rem;
    }
    .eco-node-desc {
      font-size: .8125rem;
      color: rgba(255,255,255,.6);
      line-height: 1.7;
      margin-bottom: 1.25rem;
      flex: 1;
    }
    .eco-connector {
      display: none;
    }
    @media (min-width: 992px) {
      .eco-connector {
        display: block;
        position: absolute;
        top: 50%;
        right: -16px;
        width: 32px;
        height: 2px;
        background: linear-gradient(90deg, rgba(30,107,58,.6), rgba(13,148,136,.6));
        z-index: 1;
      }
      .eco-connector::after {
        content: '';
        position: absolute;
        right: -5px;
        top: -4px;
        border: 5px solid transparent;
        border-left-color: rgba(13,148,136,.8);
      }
    }
    .eco-tag {
      display: inline-block;
      padding: .25rem .75rem;
      border-radius: var(--radius-full);
      font-size: .7rem;
      font-weight: 700;
      font-family: var(--font-ui);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: .75rem;
    }

    /* ════════════════════════════════════════
       OTHER ESTABLISHMENTS — Concept 3: Alternate Feature Blocks
    ════════════════════════════════════════ */
    .feature-block {
      padding: 4rem 0;
      border-bottom: 1px solid var(--cgf-gray-200);
    }
    .feature-block:last-of-type { border-bottom: none; }
    .feature-block-visual {
      border-radius: var(--radius-xl);
      overflow: hidden;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 3rem;
      text-align: center;
      position: relative;
    }
    .feature-block-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E") repeat;
    }
    .feature-block-monogram {
      position: relative;
      z-index: 1;
      width: 80px; height: 80px;
      border-radius: 50%;
      background: rgba(255,255,255,.15);
      border: 2px solid rgba(255,255,255,.3);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 900;
      color: #fff;
      margin: 0 auto 1.25rem;
    }
    .feature-block-name {
      position: relative;
      z-index: 1;
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: .4rem;
    }
    .feature-block-tag {
      position: relative;
      z-index: 1;
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: rgba(255,255,255,.7);
      font-family: var(--font-ui);
    }
    .feature-block-url {
      position: relative;
      z-index: 1;
      font-size: .8125rem;
      color: rgba(255,255,255,.55);
      font-family: var(--font-ui);
      margin-top: .4rem;
    }
    .feature-block-content { padding: 1rem .5rem; }
    .feature-block-eyebrow {
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-family: var(--font-ui);
      margin-bottom: .75rem;
    }
    .feature-block-heading {
      font-size: clamp(1.375rem, 2.5vw, 1.875rem);
      font-weight: 800;
      color: var(--cgf-gray-900);
      font-family: var(--font-heading);
      margin-bottom: 1.25rem;
      line-height: 1.25;
    }
    .feature-block-desc {
      font-size: 1rem;
      color: var(--cgf-gray-500);
      line-height: 1.8;
      margin-bottom: 1.75rem;
    }
    .feature-block-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: .875rem 2rem;
      border-radius: var(--radius-full);
      font-size: .9375rem;
      font-weight: 700;
      font-family: var(--font-ui);
      text-decoration: none;
      transition: all .3s ease;
    }
    .feature-block-cta:hover { transform: translateY(-2px); }
    body.dark-mode .feature-block { border-bottom-color: rgba(255,255,255,.07); }
    body.dark-mode .feature-block-heading { color: #fff; }
    body.dark-mode .feature-block-desc { color: rgba(255,255,255,.6); }

    @media (max-width: 991.98px) {
      .eco-connector { display: none; }
      .feature-block-visual { min-height: 220px; padding: 2rem; }
      .feature-block { padding: 2.5rem 0; }
    }