/* ==========================================================================
   E2V MASTER DESIGN SYSTEM - STANDARDIZED ARCHITECTURAL HERO
   Applied to service, leadership, and content pages for seamless consistency.
   Features:
   - Soft architectural light gradients (#f8fafc -> #ffffff) with #222e40 caustics
   - Animated topographic contour curves in corporate navy (#222e40)
   - Standardized typography (Inter Tight 800 + DM Sans + IBM Plex Mono)
   - Polished eyebrow badges & dual CTA action buttons
   - Flexible split (2-column) & centered layouts
   ========================================================================== */

/* ─── 1. BASE HERO WRAPPER ──────────────────────────────────────────────── */
.hero-unified,
section.hero-unified,
.hero-section.hero-unified,
.hero.hero-unified {
  position: relative !important;
  min-height: 72vh !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: 130px 6% 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(34, 46, 64, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 86% 75%, rgba(34, 46, 64, 0.04) 0%, transparent 45%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  color: #0f172a !important;
  z-index: 1 !important;
}

.hero-unified--centered {
  min-height: 60vh !important;
  padding: 140px 6% 90px !important;
  text-align: center !important;
}

/* ─── 2. ATMOSPHERIC CAUSTICS & TOPOGRAPHIC CURVES ──────────────────────── */
.hero-unified__ray {
  position: absolute;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.65;
  z-index: 1;
}

.hero-unified__ray--left {
  top: -100px;
  left: -80px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(34, 46, 64, 0.08) 0%, rgba(34, 46, 64, 0.02) 45%, transparent 70%);
  animation: heroRayBreathe 10s ease-in-out infinite alternate;
}

.hero-unified__ray--right {
  top: 15%;
  right: -80px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(34, 46, 64, 0.06) 0%, transparent 70%);
  animation: heroRayBreathe 12s ease-in-out infinite alternate-reverse;
}

@keyframes heroRayBreathe {
  0%   { transform: scale(0.94) translate(0, 0); opacity: 0.5; }
  100% { transform: scale(1.06) translate(12px, 16px); opacity: 0.8; }
}

.hero-unified__topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.85;
}

.hero-unified__topo svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── 3. CONTAINER & GRID LAYOUT ────────────────────────────────────────── */
.hero-unified__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Split (Two Column) Layout */
.hero-unified--split .hero-unified__container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

/* Centered Layout */
.hero-unified--centered .hero-unified__container {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ─── 4. CONTENT & TYPOGRAPHY ───────────────────────────────────────────── */
.hero-unified__content {
  position: relative;
  z-index: 2;
}

.hero-unified--centered .hero-unified__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Eyebrow Pill Badge */
.hero-unified__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(34, 46, 64, 0.05);
  border: 1px solid rgba(34, 46, 64, 0.12);
  border-radius: 999px;
  margin-bottom: 22px;
  font-family: var(--body-font), 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #222e40;
}

.hero-unified__eyebrow-sep {
  color: #94a3b8;
  font-weight: 300;
}

.hero-unified__eyebrow-tag {
  color: #222e40;
  font-weight: 700;
}

/* Main Display Headline */
.hero-unified__title,
.hero-unified h1 {
  font-family: var(--heading-font), 'Inter Tight', sans-serif !important;
  font-size: clamp(2.3rem, 4.2vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  margin-bottom: 20px !important;
  text-shadow: none !important;
}

.hero-unified__title span,
.hero-unified h1 span {
  color: #222e40 !important;
  position: relative;
  display: inline-block;
}

/* Lead Subtitle / Paragraph */
.hero-unified__desc,
.hero-unified p {
  font-family: var(--body-font), 'DM Sans', sans-serif !important;
  font-size: clamp(1.05rem, 1.2vw, 1.18rem) !important;
  line-height: 1.68 !important;
  color: #475569 !important;
  margin-bottom: 32px !important;
  max-width: 640px;
  font-weight: 400 !important;
}

.hero-unified--centered .hero-unified__desc {
  max-width: 760px;
}

/* ─── 5. ACTION BUTTONS ─────────────────────────────────────────────────── */
.hero-unified__actions,
.hero-unified .hero-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.hero-unified--centered .hero-unified__actions {
  justify-content: center;
}

.hero-unified__btn-primary,
.hero-unified .btn-primary {
  background: #222e40 !important;
  color: #ffffff !important;
  padding: 14px 30px !important;
  border-radius: 12px !important;
  font-family: var(--heading-font), 'Inter Tight', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.96rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 14px rgba(34, 46, 64, 0.22) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-unified__btn-primary:hover,
.hero-unified .btn-primary:hover {
  background: #18212e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(34, 46, 64, 0.32) !important;
  color: #ffffff !important;
}

.hero-unified__btn-secondary,
.hero-unified .btn-secondary {
  background: #ffffff !important;
  color: #222e40 !important;
  border: 1.5px solid rgba(34, 46, 64, 0.22) !important;
  padding: 13px 28px !important;
  border-radius: 12px !important;
  font-family: var(--heading-font), 'Inter Tight', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.96rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-unified__btn-secondary:hover,
.hero-unified .btn-secondary:hover {
  border-color: #222e40 !important;
  background: rgba(34, 46, 64, 0.04) !important;
  color: #222e40 !important;
  transform: translateY(-2px) !important;
}

/* ─── 6. VISUAL SHOWCASE COLUMN (Split Layout) ──────────────────────────── */
.hero-unified__visual,
.hero-unified .hero-image {
  position: relative;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

/* Ambient glow halo behind visual */
.hero-unified__visual::before,
.hero-unified .hero-image::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 46, 64, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

/* Visual Image */
.hero-unified__visual img,
.hero-unified .hero-image img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 20px 35px rgba(15, 23, 42, 0.12));
  transition: transform 0.4s ease;
}

.hero-unified__visual:hover img,
.hero-unified .hero-image:hover img {
  transform: scale(1.02);
}

/* Framed photo variant (for Gallery or Document photos) */
.hero-unified__visual--framed img,
.hero-unified .hero-image.hero-image--framed img {
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(226, 232, 240, 0.8);
  object-fit: cover;
  filter: none;
}

/* ─── 7. RESPONSIVE BREAKPOINTS ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .hero-unified,
  section.hero-unified,
  .hero-section.hero-unified,
  .hero.hero-unified {
    padding: 120px 5% 60px !important;
    min-height: auto !important;
  }

  .hero-unified--split .hero-unified__container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-unified__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-unified__actions,
  .hero-unified .hero-buttons {
    justify-content: center;
  }

  .hero-unified__visual img,
  .hero-unified .hero-image img {
    max-height: 380px;
  }
}

@media (max-width: 576px) {
  .hero-unified,
  section.hero-unified,
  .hero-section.hero-unified,
  .hero.hero-unified {
    padding: 110px 4% 50px !important;
  }

  .hero-unified__eyebrow {
    font-size: 0.75rem;
    padding: 5px 12px;
  }

  .hero-unified__title,
  .hero-unified h1 {
    font-size: 2.1rem !important;
  }

  .hero-unified__desc,
  .hero-unified p {
    font-size: 0.98rem !important;
  }

  .hero-unified__actions,
  .hero-unified .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-unified__btn-primary,
  .hero-unified .btn-primary,
  .hero-unified__btn-secondary,
  .hero-unified .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}