/* ==========================================================================
   E2V MASTER DESIGN SYSTEM TYPOGRAPHY & BUTTON SYSTEM
   Standardized across all pages:
   - Headings & Display: 'Inter Tight'
   - Body, Paragraphs & UI: 'DM Sans'
   - Code, Stats & Telemetry: 'IBM Plex Mono'
   - Master Primary Actions: #222e40 (Hover #18212e, -2px lift)
   - Master Secondary Actions: #ffffff (Border rgba(34, 46, 64, 0.25), Hover subtle tint)
   - Modern Border-Radius: 12px (Rectangular standard) & 9999px (Pill standard)
   ========================================================================== */

:root {
  --heading-font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --body-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono-font: 'IBM Plex Mono', monospace;
  --display-font: 'Inter Tight', sans-serif;
  --primary-color: #222e40;
  --accent-color: #222e40;
  --accent-hover: #18212e;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --btn-radius-modern: 12px;
  --btn-radius-pill: 9999px;
}

/* ── 1. GLOBAL BASE ──────────────────────────────────────────────────────── */
html {
  font-family: var(--body-font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--body-font) !important;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── 2. HEADINGS (Inter Tight) ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class*="title"]:not(.page-title-meta),
[class*="heading"],
.section-header h2,
.section-title,
.hero-title,
.hero h1,
.hero-content h1,
.hero-content h2,
.card-title,
.card-headline,
.timeline-header h1,
.timeline-card h3,
.evolution-title,
.roster-title,
.roster-col-title,
.pillars-main-heading,
.mv-header-wrap h2,
.mv-panel h3,
.director-content h2,
.director-intro h2,
.director-intro h3 {
  font-family: var(--heading-font) !important;
  letter-spacing: -0.02em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* ── 3. BODY TEXT & PARAGRAPHS (DM Sans) ─────────────────────────────────── */
p,
span:not([class*="mono"]):not([class*="badge-mono"]):not([class*="icon"]):not(.fas):not(.fab):not(.far),
li,
td,
th,
blockquote,
input,
textarea,
select,
label,
dd,
dt {
  font-family: var(--body-font) !important;
}

p {
  line-height: 1.65;
  color: inherit;
}

/* ── 4. MASTER BUTTON & UI ACTION DESIGN SYSTEM ──────────────────────────── */
button,
.btn,
.button,
a.button,
a.btn,
.btn-primary,
.btn-secondary,
.cta-button,
[class*="btn-"],
.footer-cta-btn-primary,
.footer-cta-btn-secondary,
.nav-link {
  font-family: var(--heading-font) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* 4.1 Master Primary Action Buttons (#222e40 Corporate Navy) */
.btn-primary,
a.btn-primary,
button.btn-primary,
.btn:not(.btn-secondary):not(.btn-outline):not(.btn-link):not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next),
a.btn:not(.btn-secondary):not(.btn-outline):not(.btn-link),
a.button:not(.btn-secondary),
.contact-btn-primary,
.contact-btn-submit,
.cta-button:not(.btn-secondary),
.btn-enroll,
.newsletter-form button,
.footer-cta-btn-primary {
  background-color: #222e40 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 14px rgba(34, 46, 64, 0.22) !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Base button corner standardization (12px modern standard) */
.btn,
a.btn,
button.btn,
.btn-primary,
.btn-secondary,
a.button,
.btn-enroll {
  border-radius: 12px;
}

/* Preserve pill radius where intended */
.rounded-pill,
[class*="btn-pill"],
.pill,
.contact-btn-primary,
.contact-btn-secondary,
.edu-btn-primary,
.edu-btn-secondary,
.hr-hero-btn-primary,
.hr-hero-btn-secondary,
.csr-btn-primary,
.csr-btn-secondary,
.intern-hero-btn-primary,
.intern-hero-btn-secondary,
.footer-cta-btn-primary,
.footer-cta-btn-secondary {
  border-radius: 9999px !important;
}

/* Hover state for Primary Action Buttons */
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn:not(.btn-secondary):not(.btn-outline):not(.btn-link):not(.btn-close):not(.carousel-control-prev):not(.carousel-control-next):hover,
a.btn:not(.btn-secondary):not(.btn-outline):not(.btn-link):hover,
a.button:not(.btn-secondary):hover,
.contact-btn-primary:hover,
.contact-btn-submit:hover,
.cta-button:not(.btn-secondary):hover,
.btn-enroll:hover,
.newsletter-form button:hover,
.footer-cta-btn-primary:hover {
  background-color: #18212e !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(34, 46, 64, 0.32) !important;
}

/* 4.2 Master Secondary Action Buttons */
.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.contact-btn-secondary,
.edu-btn-secondary,
.hr-hero-btn-secondary,
.csr-btn-secondary,
.intern-hero-btn-secondary {
  background-color: #ffffff !important;
  color: #222e40 !important;
  border: 1.5px solid rgba(34, 46, 64, 0.25) !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover,
.contact-btn-secondary:hover,
.edu-btn-secondary:hover,
.hr-hero-btn-secondary:hover,
.csr-btn-secondary:hover,
.intern-hero-btn-secondary:hover {
  background-color: rgba(34, 46, 64, 0.05) !important;
  border-color: #222e40 !important;
  color: #222e40 !important;
  transform: translateY(-2px);
}

/* ── 5. NUMBERS, STATS & CODE (IBM Plex Mono) ────────────────────────────── */
code,
pre,
kbd,
samp,
.mono,
.dock-label,
.dock-metric-pill,
.stat-number,
.counter,
.metric-number,
[class*="mono"] {
  font-family: var(--mono-font) !important;
}

/* ── 6. MASTER MOBILE OPTIMIZATION SUITE ───────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Media & Embed Universal Safety */
img:not([class*="bg"]):not([class*="ray"]),
video:not([class*="bg"]),
iframe {
  max-width: 100%;
}

/* Universal Heading & Text Overflow Protection */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class*="title"], [class*="heading"], p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prevent iOS Auto-Zoom on Form Inputs & Ensure Touch Accessibility */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  button,
  a.btn,
  .btn,
  .button,
  [class*="btn-primary"],
  [class*="btn-secondary"] {
    touch-action: manipulation;
  }
}

/* Universal Mobile Breakpoint (<= 640px) */
@media (max-width: 640px) {
  /* All Hero Sections */
  [class*="-hero"] {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }

  /* All Architectural Hero Headings */
  [class*="-hero__h1"],
  .hax-hero-title,
  .hero-unified__title {
    font-size: clamp(1.95rem, 8vw, 2.45rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 16px !important;
  }

  /* Underline Swoosh Responsive Scale */
  [class*="-hero__swoosh"],
  .hax-hero-swoosh {
    width: min(100%, 220px) !important;
    height: 15px !important;
  }

  /* Hero Descriptions */
  [class*="-hero__p"],
  .hax-hero-desc,
  .hero-unified__desc {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    padding: 0 4px !important;
    margin-bottom: 24px !important;
  }

  /* Hero CTA Buttons on Mobile: full width stacked */
  [class*="-hero__btns"],
  .hax-hero-btns,
  .hero-unified__actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 12px !important;
  }

  [class*="-hero__btns"] a,
  [class*="-hero__btns"] button,
  .hax-hero-btns a,
  .hero-unified__actions a {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 13px 22px !important;
  }

  /* Bento Stats Cards: 2x2 Grid with Zero Cutoff */
  [class*="-hero__stats"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 36px !important;
  }

  [class*="-hero__stat"] {
    min-width: 0 !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  [class*="-hero__stat-num"] {
    font-size: 1.45rem !important;
    margin-bottom: 3px !important;
  }

  [class*="-hero__stat-label"] {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }
}

/* Compact Phones (<= 380px) */
@media (max-width: 380px) {
  [class*="-hero__h1"],
  .hax-hero-title,
  .hero-unified__title {
    font-size: clamp(1.75rem, 8vw, 2.05rem) !important;
  }

  [class*="-hero__stats"] {
    gap: 8px !important;
  }

  [class*="-hero__stat"] {
    padding: 12px 6px !important;
  }

  [class*="-hero__stat-num"] {
    font-size: 1.3rem !important;
  }

  [class*="-hero__stat-label"] {
    font-size: 0.68rem !important;
  }
}


/* Ensure Font Awesome web fonts use font-display: swap to prevent font-display penalty */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: swap;
  src: local('Font Awesome 6 Free');
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: swap;
  src: local('Font Awesome 6 Brands');
}