/* 
  MEHIT University Founder Legacy Platform — Custom Stylesheet
  Design Movement: Neo-Classical Editorial
  Color Philosophy: Deep Navy (#071523), Premium Gold (#C7A94F), Dark Background (#050B12), Soft Background (#F8F6F0)
  No Tailwind. No Frameworks. Pure CSS3.
*/

/* =============================================================================
   1. DESIGN TOKENS & VARIABLES
   ============================================================================= */
:root {
  /* MEHIT Core Colors */
  --color-navy: #071523;
  --color-gold: #C7A94F;
  --color-gold-hover: #DFBE65;
  --color-dark-bg: #050B12;
  --color-soft-bg: #F8F6F0;
  
  /* Neutral Palette */
  --color-white: #FFFFFF;
  --color-text-primary: #F5F5F7;
  --color-text-muted: #A0AEC0;
  --color-border: rgba(199, 169, 79, 0.15);
  
  /* Typography Systems */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Cinzel', Georgia, Cambria, "Times New Roman", Times, serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  
  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-fast: all 0.2s ease-out;
  --transition-lazy: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =============================================================================
   2. RESET & BASE LAYOUTS
   ============================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--color-dark-bg);
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: var(--color-navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Premium Ambient Glows */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(circle at 10% 15%, rgba(199, 169, 79, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 85% 45%, rgba(199, 169, 79, 0.02) 0%, transparent 35%),
    radial-gradient(circle at 15% 80%, rgba(199, 169, 79, 0.03) 0%, transparent 40%);
}

/* Selection */
::selection {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

/* Containers */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.container-narrow {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Typography Utility */
.font-editorial {
  font-family: var(--font-editorial);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

.text-gold {
  color: var(--color-gold) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

/* Spacing */
.mb-24 { margin-bottom: 6rem; }
.mb-16 { margin-bottom: 4rem; }
.relative { position: relative; }
.z-10 { z-index: 10; }

/* =============================================================================
   3. REUSABLE ATOMIC COMPONENTS (Buttons, Badges, Dividers, Icons)
   ============================================================================= */
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 0;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.btn-gold {
  background-color: var(--color-gold);
  color: var(--color-navy);
  height: 3.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 0.75rem;
}

.btn-gold:hover {
  background-color: var(--color-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(199, 169, 79, 0.15);
}

.btn-gold:active {
  transform: translateY(0);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-gold);
  border: 1px solid rgba(199, 169, 79, 0.3);
  height: 3.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 0.75rem;
}

.btn-outline:hover {
  background-color: rgba(199, 169, 79, 0.05);
  border-color: var(--color-gold);
  color: var(--color-gold-hover);
}

.btn-sm {
  height: 2.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 0.7rem;
}

.btn-block {
  width: 100%;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: rgba(199, 169, 79, 0.08);
  border: 1px solid rgba(199, 169, 79, 0.15);
  padding: 0.5rem 1rem;
  color: var(--color-gold);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* Dividers */
.divider {
  width: 3rem;
  height: 1px;
  background-color: var(--color-gold);
  margin-left: auto;
  margin-right: auto;
}

/* Icons */
.icon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
}

.icon-star {
  color: var(--color-gold);
  animation: pulse 2s infinite;
}

.icon-arrow {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.btn:hover .icon-arrow {
  transform: translateX(4px);
}

.icon-arrow-sm {
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.35rem;
  transition: transform 0.3s ease;
}

.btn:hover .icon-arrow-sm {
  transform: translateX(2px);
}

.icon-gold {
  color: var(--color-gold);
}

/* =============================================================================
   4. NAVIGATION (Header, Drawer, Side Dots)
   ============================================================================= */
/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  z-index: 100;
  background-color: rgba(7, 21, 35, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(199, 169, 79, 0.08);
  transition: var(--transition-smooth);
}

.header-scrolled {
  height: 5rem;
  background-color: rgba(5, 11, 18, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.header-container {
  max-width: 1280px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  letter-spacing: 0.2em;
  font-family: var(--font-sans);
}

.brand-first {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-gold);
  text-transform: uppercase;
}

.brand-last {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 0.15rem;
}

/* Desktop Nav Links */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .desktop-nav {
    display: flex;
  }
}

.nav-link {
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  transition: var(--transition-fast);
  position: relative;
  padding-bottom: 0.25rem;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-gold);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--color-gold);
}

.nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: none;
}

@media (min-width: 1024px) {
  .header-actions {
    display: block;
  }
}

/* Mobile Toggle */
.mobile-toggle {
  display: block;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0.5rem;
  transition: var(--transition-fast);
}

.mobile-toggle:hover {
  color: var(--color-gold);
}

.mobile-toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 1024px) {
  .mobile-toggle {
    display: none;
  }
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 24rem;
  height: 100vh;
  background-color: var(--color-navy);
  border-left: 1px solid var(--color-border);
  z-index: 200;
  padding: 6rem 3rem 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

.mobile-drawer.open {
  transform: translateX(0);
}

.mobile-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0.5rem;
  transition: var(--transition-fast);
}

.mobile-close:hover {
  color: var(--color-gold);
}

.mobile-close .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-nav-link {
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: var(--transition-fast);
}

.mobile-nav-link:hover {
  color: var(--color-gold);
  transform: translateX(6px);
}

/* Global Side Dot Navigation */
.dot-navigation {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 1200px) {
  .dot-navigation {
    display: flex;
  }
}

.dot-indicator {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.dot-indicator div {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(160, 174, 192, 0.3);
  transition: var(--transition-smooth);
}

.dot-indicator:hover div {
  background-color: var(--color-gold);
  transform: scale(1.5);
}

.dot-indicator.active div {
  background-color: var(--color-gold);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(199, 169, 79, 0.2);
}

/* Global Scroll Progress */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: var(--color-gold);
  z-index: 101;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* =============================================================================
   5. SECTIONS & LAYOUT SYSTEMS
   ============================================================================= */
.section {
  padding-top: 8rem;
  padding-bottom: 8rem;
  position: relative;
  z-index: 10;
}

.bg-dark {
  background-color: var(--color-dark-bg);
}

/* Editorial Headers */
.section-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3rem;
  }
}

.section-desc {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-w: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* =============================================================================
   SECTION 1: HERO
   ============================================================================= */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 10rem;
  padding-bottom: 6rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
  }
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-white);
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hero-title { font-size: 3.5rem; }
}

@media (min-width: 1280px) {
  .hero-title { font-size: 4.5rem; }
}

.text-fade {
  background: linear-gradient(to right, var(--color-white), var(--color-text-primary), rgba(199, 169, 79, 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.hero-description {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  max-w: 36rem;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 480px) {
  .hero-buttons {
    width: auto;
  }
}

/* Portrait Framing */
.hero-image {
  display: flex;
  justify-content: center;
}

.portrait-frame {
  position: relative;
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(199, 169, 79, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-navy), transparent 40%);
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}

.portrait-corner-top {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 3rem;
  height: 3rem;
  border-top: 2px solid var(--color-gold);
  border-left: 2px solid var(--color-gold);
  z-index: 3;
}

.portrait-corner-bottom {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  width: 3rem;
  height: 3rem;
  border-bottom: 2px solid var(--color-gold);
  border-right: 2px solid var(--color-gold);
  z-index: 3;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-lazy);
  z-index: 1;
}

.portrait-frame:hover .portrait-img {
  transform: scale(1.04);
}

/* =============================================================================
   SECTION 2: MISSION
   ============================================================================= */
.mission-section {
  background-color: var(--color-dark-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.quote-text {
  font-size: 1.75rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-top: 3rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .quote-text {
    font-size: 2.25rem;
  }
}

.mission-sub {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* =============================================================================
   SECTION 3: TIMELINE
   ============================================================================= */
.timeline {
  position: relative;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.5rem;
  bottom: 0;
  width: 1px;
  background-color: rgba(199, 169, 79, 0.2);
}

.timeline-item {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 4rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -0.9rem;
  top: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-navy);
  border: 2px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  z-index: 2;
}

.timeline-dot-inner {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(199, 169, 79, 0.15);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.timeline-number {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.05em;
}

.timeline-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline-text {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* =============================================================================
   SECTION 4: INSTITUTIONS
   ============================================================================= */
.panels-stack {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .panel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.panel-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.panel-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.panel-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.panel-subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.panel-desc {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.panel-actions {
  margin-top: 1rem;
}

/* Media Frame */
.panel-media {
  width: 100%;
}

.media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(199, 169, 79, 0.2);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(199, 169, 79, 0.1);
  pointer-events: none;
}

.media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-lazy);
}

.media-frame:hover .media-img {
  transform: scale(1.05);
}

@media (min-width: 1024px) {
  .panel-reverse .panel-info {
    order: 2;
  }
  .panel-reverse .panel-media {
    order: 1;
  }
}

/* =============================================================================
   SECTION 5: PHILOSOPHY
   ============================================================================= */
.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .philosophy-grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* Decorative Vertical Progress Path */
.philosophy-graphic {
  display: none;
  justify-content: center;
  height: 32rem;
}

@media (min-width: 1024px) {
  .philosophy-graphic {
    display: flex;
  }
}

.vertical-path-container {
  position: relative;
  width: 2px;
  height: 100%;
  background-color: rgba(199, 169, 79, 0.1);
}

.vertical-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vertical-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: var(--color-gold);
  transition: height 0.1s ease-out;
}

.path-point {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-navy);
  border: 2px solid var(--color-gold);
  transition: var(--transition-smooth);
}

.path-point.active {
  background-color: var(--color-gold);
  box-shadow: 0 0 0 6px rgba(199, 169, 79, 0.2);
  transform: translateX(-50%) scale(1.25);
}

/* Philosophy Points List */
.philosophy-points {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.philosophy-item {
  display: flex;
  gap: 1.5rem;
}

.item-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  padding-top: 0.15rem;
}

.item-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: var(--transition-fast);
}

.philosophy-item:hover .item-title {
  color: var(--color-gold);
}

.item-desc {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* =============================================================================
   SECTION 6: PRESIDENTIAL ADDRESS
   ============================================================================= */
.address-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .address-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.address-image {
  display: flex;
  justify-content: center;
}

.address-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.address-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.address-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 1.15rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

.lead-paragraph {
  font-size: 1.35rem;
  font-weight: 700;
}

.signature-block {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(199, 169, 79, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sig-name {
  font-size: 1.35rem;
  color: var(--color-white);
}

.sig-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.shadow-large {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.portrait-img.grayscale {
  filter: grayscale(100%) contrast(1.15) brightness(0.95);
}

.portrait-frame:hover .portrait-img.grayscale {
  filter: grayscale(0%) contrast(1.05) brightness(1);
}

/* =============================================================================
   SECTION 7: IMPACT & LEGACY
   ============================================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.stat-card {
  background-color: #0C1E2F;
  border: 1px solid rgba(199, 169, 79, 0.08);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 18rem;
  transition: var(--transition-smooth);
}

.stat-card:hover {
  border-color: rgba(199, 169, 79, 0.3);
  box-shadow: 0 15px 35px rgba(199, 169, 79, 0.05);
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  word-wrap: break-word;
}

@media (min-width: 1200px) {
  .stat-value {
    font-size: 2.25rem;
  }
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-white);
  text-transform: uppercase;
}

.stat-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* =============================================================================
   SECTION 8: GALLERY
   ============================================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  grid-auto-rows: 16rem;
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 18rem;
  }
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(199, 169, 79, 0.15);
  display: flex;
  align-items: flex-end;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-dark-bg), transparent 60%);
  opacity: 0.6;
  z-index: 2;
  transition: var(--transition-smooth);
}

.gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-lazy);
  z-index: 1;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.04);
}

.gallery-item:hover .gallery-overlay {
  opacity: 0.4;
}

.gallery-caption {
  position: relative;
  z-index: 3;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.caption-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.caption-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Asymmetrical Grid Sizing */
@media (min-width: 768px) {
  .item-large {
    grid-column: span 8;
    grid-row: span 2;
  }
  
  .item-medium {
    grid-column: span 4;
    grid-row: span 1;
  }
  
  .item-medium-tall {
    grid-column: span 4;
    grid-row: span 2;
  }
  
  .item-small {
    grid-column: span 4;
    grid-row: span 1;
  }
}

/* =============================================================================
   SECTION 9: QUOTE
   ============================================================================= */
.quote-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quote-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.quote-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.quote-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 20%, var(--color-navy) 80%);
}

.massive-quote {
  font-size: 2rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin-top: 3rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .massive-quote {
    font-size: 3rem;
  }
}

.quote-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.author-name {
  font-size: 1.35rem;
  color: var(--color-white);
}

.author-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
}

/* =============================================================================
   SECTION 10: ECOSYSTEM
   ============================================================================= */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.eco-card {
  background-color: #0C1E2F;
  border: 1px solid rgba(199, 169, 79, 0.08);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  text-align: left;
  transition: var(--transition-smooth);
}

.eco-card:hover {
  border-color: rgba(199, 169, 79, 0.3);
  box-shadow: 0 15px 35px rgba(199, 169, 79, 0.05);
  transform: translateY(-4px);
}

.eco-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.eco-icon-wrapper {
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(199, 169, 79, 0.08);
  border: 1px solid rgba(199, 169, 79, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
}

.eco-icon-wrapper .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.eco-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.eco-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.eco-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: fit-content;
  transition: var(--transition-fast);
}

.eco-link:hover {
  color: var(--color-white);
}

.eco-link .icon {
  margin-left: 0.35rem;
  transition: transform 0.3s ease;
}

.eco-link:hover .icon {
  transform: translateX(3px);
}

/* =============================================================================
   SECTION 11: FINAL CTA & CONTACTS
   ============================================================================= */
.final-section {
  overflow: hidden;
}

.final-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/editorial_abstract_bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  z-index: 1;
}

.final-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-white);
  letter-spacing: -0.01em;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .final-title {
    font-size: 3.5rem;
  }
}

.final-desc {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.final-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
}

/* Contact Grid */
.contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  border-top: 1px solid rgba(199, 169, 79, 0.1);
  padding-top: 4rem;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .contact-info {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-item .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.contact-clickable {
  cursor: pointer;
  transition: var(--transition-fast);
}

.contact-clickable:hover {
  color: var(--color-gold);
}

/* =============================================================================
   6. FOOTER
   ============================================================================= */
.footer {
  background-color: #050E1A;
  border-top: 1px solid var(--color-border);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.footer-copyright {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.footer-tagline {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(160, 174, 192, 0.4);
  text-transform: uppercase;
}

/* =============================================================================
   7. PREMIUM NATIVE SCROLL ANIMATIONS
   ============================================================================= */
.scroll-reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), 
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Custom easing animation delays */
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.3s; }

/* Pulse animation */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}







---------PRESI PAGE-------------


.mehit-leadership-hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:#050B12;
  font-family:Inter,Rubik,Arial,sans-serif;
}

.leadership-hero-bg{
  position:absolute;
  inset:0;
}

.leadership-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.34;
  transform:scale(1.06);
  animation:leadershipHeroZoom 16s ease-in-out infinite alternate;
}

@keyframes leadershipHeroZoom{
  from{transform:scale(1.04);}
  to{transform:scale(1.14);}
}

.leadership-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,11,18,.96),rgba(7,21,35,.78),rgba(7,21,35,.35)),
    radial-gradient(circle at 25% 55%,rgba(199,169,79,.20),transparent 38%),
    linear-gradient(180deg,rgba(5,11,18,.25),rgba(5,11,18,.92));
}

.leadership-hero-wrap{
  position:relative;
  z-index:3;
  max-width:1450px;
  min-height:100vh;
  margin:auto;
  padding:150px clamp(18px,6vw,90px) 80px;
  display:grid;
  grid-template-columns:1.1fr .75fr;
  gap:clamp(35px,6vw,80px);
  align-items:center;
}

.leadership-hero-copy span{
  display:inline-flex;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#C7A94F;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
}

.leadership-hero-copy h1{
  margin:30px 0 24px;
  color:#fff;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(3.5rem,7.5vw,8rem);
  line-height:.88;
  letter-spacing:-.07em;
  font-weight:700;
}

.leadership-hero-copy p{
  max-width:720px;
  color:rgba(255,255,255,.76);
  line-height:1.9;
}

.leadership-hero-actions{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.leadership-btn{
  min-height:56px;
  padding:0 24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  font-size:.9rem;
  font-weight:900;
  transition:.3s ease;
}

.leadership-btn.primary{
  background:#C7A94F;
  color:#071523;
}

.leadership-btn.primary b{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#071523;
  color:#fff;
  display:grid;
  place-items:center;
}

.leadership-btn.secondary{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

.leadership-btn:hover{
  transform:translateY(-4px);
}

/* PORTRAIT */

.leadership-hero-portrait{
  position:relative;
  min-height:650px;
  border-radius:42px;
  overflow:hidden;
  background:#071523;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 110px rgba(0,0,0,.36);
}

.leadership-hero-portrait img{
  width:100%;
  height:650px;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform .9s ease;
}

.leadership-hero-portrait:hover img{
  transform:scale(1.06);
}

.leadership-hero-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(5,11,18,.94),rgba(5,11,18,.10) 65%,transparent);
}

.leadership-name-card{
  position:absolute;
  z-index:2;
  left:26px;
  right:26px;
  bottom:26px;
  padding:24px;
  border-radius:26px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
}

.leadership-name-card small{
  display:block;
  margin-bottom:10px;
  color:#C7A94F;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.14em;
}

.leadership-name-card h3{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(2rem,4vw,3.8rem);
  line-height:.95;
  letter-spacing:-.07em;
  font-weight:600;
}

.leadership-name-card p{
  margin:0;
  color:rgba(255,255,255,.70);
  line-height:1.6;
}

/* MOBILE */

@media(max-width:1050px){
  .leadership-hero-wrap{
    grid-template-columns:1fr;
  }

  .leadership-hero-portrait,
  .leadership-hero-portrait img{
    min-height:540px;
    height:540px;
  }
}

@media(max-width:700px){
  .leadership-hero-wrap{
    padding:130px 14px 60px;
  }

  .leadership-hero-copy h1{
    font-size:clamp(3.2rem,14vw,5.8rem);
  }

  .leadership-hero-actions{
    flex-direction:column;
  }

  .leadership-btn{
    width:100%;
  }

  .leadership-hero-portrait{
    border-radius:30px;
  }

  .leadership-hero-portrait,
  .leadership-hero-portrait img{
    min-height:460px;
    height:460px;
  }

  .leadership-name-card{
    left:18px;
    right:18px;
    bottom:18px;
    border-radius:22px;
  }
}







.mehit-founder-snapshot{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#F8F6F0;
  padding:clamp(80px,8vw,130px) clamp(18px,6vw,90px);
  font-family:Inter,Rubik,Arial,sans-serif;
}

.founder-snapshot-wrap{
  max-width:1450px;
  margin:auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:start;
}

.snapshot-tag{
  display:inline-flex;
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(7,21,35,.08);
  color:#C7A94F;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.16em;
}

.snapshot-left h2{
  margin:30px 0 10px;
  color:#071523;
  font-size:clamp(3rem,6vw,6rem);
  line-height:.9;
  letter-spacing:-.08em;
  font-weight:600;
}

.snapshot-left h3{
  margin:0 0 30px;
  color:#C7A94F;
  font-size:1.2rem;
  font-weight:800;
}

.snapshot-bio{
  max-width:620px;
  color:rgba(7,21,35,.68);
  line-height:1.9;
}

.snapshot-stats{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.snapshot-stat{
  padding:22px;
  min-width:150px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(7,21,35,.06);
}

.snapshot-stat strong{
  display:block;
  color:#071523;
  font-size:2rem;
  font-weight:900;
}

.snapshot-stat span{
  color:rgba(7,21,35,.65);
  font-size:.85rem;
}

.leadership-pillars{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.pillar-card{
  padding:32px;
  border-radius:30px;
  background:#fff;
  border:1px solid rgba(7,21,35,.06);
  transition:.35s ease;
}

.pillar-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 70px rgba(7,21,35,.08);
}

.pillar-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  background:rgba(199,169,79,.12);
  color:#C7A94F;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  font-weight:900;
}

.pillar-card h4{
  margin:0 0 14px;
  color:#071523;
  font-size:1.2rem;
  font-weight:800;
}

.pillar-card p{
  margin:0;
  color:rgba(7,21,35,.66);
  line-height:1.75;
}

@media(max-width:1050px){

  .founder-snapshot-wrap{
    grid-template-columns:1fr;
  }

  .leadership-pillars{
    grid-template-columns:1fr;
  }

}

@media(max-width:700px){

  .mehit-founder-snapshot{
    padding:70px 14px;
  }

  .snapshot-left h2{
    font-size:clamp(3rem,14vw,5rem);
  }

  .snapshot-stat{
    width:100%;
  }

}











.president-editorial-address{
  width:100vw;
  margin-left:calc(50% - 50vw);
  position:relative;
  overflow:hidden;
  padding:clamp(110px,9vw,150px) clamp(18px,6vw,90px);
  background:#050B12;
  color:#fff;
  font-family:Rubik,Inter,Arial,sans-serif;
}

.president-editorial-address::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 10%, rgba(199,169,79,.12), transparent 35%),
    radial-gradient(circle at 12% 80%, rgba(255,255,255,.035), transparent 30%);
  pointer-events:none;
}

.president-editorial-wrap{
  position:relative;
  z-index:2;
  max-width:1380px;
  margin:auto;
  display:grid;
  grid-template-columns:.95fr 1fr;
  gap:clamp(45px,6vw,90px);
  align-items:center;
}

.president-editorial-side{
  position:absolute;
  left:clamp(18px,3vw,60px);
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:36px;
  border-left:1px solid rgba(255,255,255,.08);
  padding-left:28px;
}

.president-editorial-side span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:rgba(255,255,255,.42);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:lowercase;
}

.president-editorial-side .active{
  color:#fff;
  position:relative;
}

.president-editorial-side .active::before{
  content:"";
  position:absolute;
  left:-19px;
  top:50%;
  width:2px;
  height:36px;
  background:#C7A94F;
  transform:translateY(-50%);
}

.president-editorial-photo{
  min-height:560px;
  background:#111821;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 110px rgba(0,0,0,.35);
}

.president-editorial-photo img{
  width:100%;
  height:660px;
  object-fit:cover;
  object-position:center top;
  display:block;
  filter:saturate(.96) contrast(1.05);
}

.president-editorial-kicker{
  display:block;
  margin-bottom:22px;
  color:#C7A94F;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.president-editorial-content h2{
  margin:0 0 28px;
  color:#fff;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(4rem,8vw,8rem);
  line-height:.82;
  letter-spacing:-.07em;
  font-weight:700;
}

.president-editorial-content h2 em{
  display:block;
  color:#C7A94F;
  font-style:normal;
}

.president-editorial-content p{
  max-width:720px;
  color:rgba(255,255,255,.78);
  font-size:1rem;
  line-height:1.9;
  margin:0 0 24px;
}

.president-editorial-quote{
  margin-top:34px;
  padding:28px 34px;
  border:1px solid rgba(199,169,79,.45);
  background:rgba(255,255,255,.035);
  position:relative;
}

.president-editorial-quote span{
  position:absolute;
  top:-18px;
  left:28px;
  color:#C7A94F;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:4rem;
  line-height:1;
}

.president-editorial-quote h3{
  margin:0;
  color:#fff;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(1.8rem,3vw,3rem);
  line-height:1.15;
  letter-spacing:-.04em;
}

.president-editorial-quote h3 em{
  color:#C7A94F;
  font-style:normal;
}

.president-editorial-signature{
  margin-top:34px;
  color:rgba(255,255,255,.42);
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.4rem);
  font-style:italic;
  letter-spacing:.02em;
}

@media(max-width:1050px){
  .president-editorial-wrap{
    grid-template-columns:1fr;
  }

  .president-editorial-side{
    display:none;
  }

  .president-editorial-photo img{
    height:560px;
  }
}

@media(max-width:700px){
  .president-editorial-address{
    padding:80px 14px;
  }

  .president-editorial-photo{
    min-height:auto;
  }

  .president-editorial-photo img{
    height:430px;
  }

  .president-editorial-content h2{
    font-size:clamp(3.5rem,17vw,5.6rem);
  }

  .president-editorial-quote{
    padding:26px 22px;
  }
}










.mehit-vision-section{
    width:100vw;
    margin-left:calc(50% - 50vw);

    background:#F8F6F0;

    padding:
    clamp(100px,8vw,140px)
    clamp(18px,6vw,90px);

    font-family:
    Inter,
    Arial,
    sans-serif;
}

.vision-container{
    max-width:1200px;
    margin:auto;
}

.vision-header{
    text-align:center;
    margin-bottom:80px;
}

.vision-header span{
    color:#C7A94F;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.vision-header h2{
    margin:25px auto 0;

    max-width:900px;

    color:#071523;

    font-size:
    clamp(3rem,6vw,6rem);

    line-height:.9;

    letter-spacing:-.08em;

    font-weight:500;
}

.vision-intro{
    max-width:900px;

    margin:
    0 auto 80px;

    text-align:center;

    color:
    rgba(7,21,35,.75);

    font-size:1.2rem;

    line-height:2;
}

.vision-principles{
    display:grid;
    gap:45px;
}

.vision-principle{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:40px;

    padding-bottom:35px;

    border-bottom:
    1px solid rgba(7,21,35,.08);
}

.vision-principle:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.vision-principle h3{
    margin:0;

    color:#071523;

    font-size:
    clamp(1.8rem,3vw,2.5rem);

    font-family:
    "Libre Baskerville",
    Georgia,
    serif;

    font-weight:600;
}

.vision-principle p{
    margin:0;

    color:
    rgba(7,21,35,.70);

    line-height:2;
}

@media(max-width:768px){

    .mehit-vision-section{
        padding:70px 14px;
    }

    .vision-header{
        text-align:left;
    }

    .vision-header h2{
        font-size:
        clamp(3rem,14vw,5rem);
    }

    .vision-intro{
        text-align:left;
        font-size:1.05rem;
    }

    .vision-principle{
        grid-template-columns:1fr;
        gap:16px;
    }

}








.mehit-vision-roadmap{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:clamp(80px,7vw,115px) clamp(16px,5vw,70px);
  background:#071523;
  font-family:Inter,Rubik,Arial,sans-serif;
  overflow:hidden;
}

.vision-roadmap-head{
  max-width:880px;
  margin:0 auto 60px;
  text-align:center;
}

.vision-roadmap-head span{
  color:#C7A94F;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.18em;
}

.vision-roadmap-head h2{
  margin:22px 0 0;
  color:#fff;
  font-size:clamp(2.8rem,6vw,5.8rem);
  line-height:.9;
  letter-spacing:-.08em;
  font-weight:600;
}

.vision-road-stage{
  max-width:980px;
  height:1450px;
  margin:auto;
  position:relative;
}

.vision-road-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

#visionRoadPath{
  stroke:#C7A94F;
  stroke-width:26;
  stroke-linecap:round;
  stroke-dasharray:4200;
  stroke-dashoffset:4200;
  filter:drop-shadow(0 0 22px rgba(199,169,79,.28));
}

.vision-step{
  position:absolute;
  width:330px;
  display:flex;
  align-items:center;
  gap:18px;
  opacity:.25;
  transform:scale(.96);
  transition:.55s ease;
}

.vision-step.active{
  opacity:1;
  transform:scale(1);
}

.vision-step b{
  width:76px;
  height:76px;
  border-radius:50%;
  background:#C7A94F;
  color:#071523;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:1.25rem;
  font-weight:900;
  box-shadow:0 0 45px rgba(199,169,79,.35);
}

.vision-step.active b{
  box-shadow:
    0 0 40px rgba(199,169,79,.65),
    0 0 90px rgba(199,169,79,.28);
}

.vision-step h3{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.55rem,2.2vw,2.25rem);
  line-height:1;
  font-weight:900;
}

.vision-step p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:.95rem;
  line-height:1.65;
}

.step-1{top:115px;right:30px;}
.step-2{top:370px;left:30px;}
.step-3{top:650px;right:30px;}
.step-4{top:930px;left:30px;}
.step-5{top:1205px;right:30px;}

@media(max-width:700px){
  .mehit-vision-roadmap{
    padding:70px 14px;
  }

  .vision-roadmap-head{
    text-align:left;
    margin-bottom:45px;
  }

  .vision-roadmap-head h2{
    font-size:clamp(2.8rem,13vw,4.8rem);
  }

  .vision-road-stage{
    height:auto;
    max-width:430px;
    display:grid;
    gap:28px;
    padding-left:34px;
  }

  .vision-road-svg{
    display:none;
  }

  .vision-road-stage::before{
    content:"";
    position:absolute;
    left:34px;
    top:20px;
    bottom:20px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(#C7A94F, rgba(199,169,79,.18));
  }

  .vision-step{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    width:100%;
    opacity:1;
    transform:none;
    align-items:flex-start;
    padding-left:22px;
  }

  .vision-step b{
    width:58px;
    height:58px;
    font-size:1rem;
    margin-left:-51px;
  }

  .vision-step h3{
    font-size:1.65rem;
  }

  .vision-step p{
    font-size:.92rem;
    line-height:1.7;
    max-width:260px;
  }
}







.mehit-signature-quote{
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:95vh;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#050B12;
  font-family:Inter,Rubik,Arial,sans-serif;
  color:#fff;
}

.signature-quote-bg{
  position:absolute;
  inset:0;
}

.signature-quote-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.42;
  transform:scale(1.05);
  animation:signatureBgZoom 16s ease-in-out infinite alternate;
}

@keyframes signatureBgZoom{
  from{transform:scale(1.04);}
  to{transform:scale(1.14);}
}

.signature-quote-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,11,18,.98),rgba(5,11,18,.78),rgba(5,11,18,.48)),
    linear-gradient(180deg,rgba(5,11,18,.28),rgba(5,11,18,.95)),
    radial-gradient(circle at 30% 45%,rgba(199,169,79,.20),transparent 38%);
}

.signature-quote-wrap{
  position:relative;
  z-index:3;
  max-width:1250px;
  width:100%;
  padding:clamp(80px,8vw,130px) clamp(18px,6vw,90px);
}

.signature-quote-wrap span{
  display:inline-flex;
  color:#C7A94F;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:30px;
}

.signature-quote-wrap h2{
  max-width:1080px;
  margin:0;
  color:#fff;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(3rem,6.5vw,7.2rem);
  line-height:.95;
  letter-spacing:-.07em;
  font-weight:700;
}

.signature-quote-line{
  width:min(380px,70vw);
  height:2px;
  margin:42px 0 32px;
  background:linear-gradient(90deg,#C7A94F,transparent);
}

.signature-quote-wrap p{
  max-width:720px;
  margin:0;
  color:rgba(255,255,255,.74);
  font-size:1.05rem;
  line-height:1.9;
}

.signature-author{
  margin-top:42px;
}

.signature-author strong{
  display:block;
  color:#fff;
  font-size:1.2rem;
  font-weight:900;
}

.signature-author small{
  display:block;
  margin-top:8px;
  color:rgba(255,255,255,.58);
  line-height:1.6;
}

@media(max-width:700px){
  .mehit-signature-quote{
    min-height:80vh;
  }

  .signature-quote-wrap{
    padding:70px 14px;
  }

  .signature-quote-wrap h2{
    font-size:clamp(2.8rem,13vw,5rem);
  }
}







.mehit-portfolio-cta{
    width:100vw;
    margin-left:calc(50% - 50vw);

    background:#F8F6F0;

    padding:
    clamp(90px,8vw,140px)
    clamp(18px,6vw,90px);

    font-family:
    Inter,
    Arial,
    sans-serif;
}

.portfolio-cta-wrap{
    max-width:1450px;
    margin:auto;

    display:grid;

    grid-template-columns:
    1fr
    500px;

    gap:80px;

    align-items:center;
}

.portfolio-cta-left span{
    display:block;

    margin-bottom:25px;

    color:#C7A94F;

    font-size:.75rem;

    font-weight:900;

    letter-spacing:.22em;
}

.portfolio-cta-left h2{
    margin:0;

    color:#071523;

    font-size:
    clamp(3rem,6vw,6.5rem);

    line-height:.9;

    letter-spacing:-.08em;

    font-weight:500;
}

.portfolio-cta-right p{
    margin:0 0 35px;

    color:
    rgba(7,21,35,.72);

    line-height:2;

    font-size:1.05rem;
}

.portfolio-cta-btn{
    display:inline-flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    padding:
    18px
    18px
    18px
    30px;

    background:#071523;

    border-radius:999px;

    transition:.35s ease;
}

.portfolio-cta-btn:hover{
    transform:translateY(-5px);
}

.portfolio-cta-btn span{
    color:#fff;

    font-weight:800;

    letter-spacing:.04em;
}

.portfolio-arrow{
    width:52px;
    height:52px;

    border-radius:50%;

    background:#C7A94F;

    color:#071523;

    display:grid;
    place-items:center;

    font-size:1.3rem;
    font-weight:900;
}

@media(max-width:1000px){

    .portfolio-cta-wrap{
        grid-template-columns:1fr;
        gap:40px;
    }

}

@media(max-width:768px){

    .mehit-portfolio-cta{
        padding:70px 14px;
    }

    .portfolio-cta-left h2{
        font-size:
        clamp(3rem,14vw,5rem);
    }

    .portfolio-cta-btn{
        width:100%;
        justify-content:space-between;
    }

}