/* ===========================
   Global layout helpers
   =========================== */

:root {
  /* Adjust if your header is taller or shorter */
  --header-height: 80px;
}

/* Prevent the hero from hiding under a fixed header */
.hero-section {
  min-height: calc(100vh - var(--header-height));
  padding-top: var(--header-height);
  position: relative;
}

/* Parallax fix for mobile - bg-fixed can stutter on phones */
@media (max-width: 768px) {
  .hero-section {
    background-attachment: scroll;
  }
}

/* Keep hero content nicely centered on all heights */
.hero-inner {
  text-align: center;
}

/* Slightly tighter on very small screens */
@media (max-width: 480px) {
  .hero-inner {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ===========================
   Scroll fade animation
   =========================== */

.fade-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   Who we protect - image grid
   =========================== */

.who-layout {
  align-items: center;
}

.who-image-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  background-color: #020712;
}

/* Offset the top and bottom cards to mimic the reference stagger */
.who-offset-top {
  transform: translateY(-18px);
}

.who-offset-bottom {
  transform: translateY(18px);
}

/* Remove offsets on mobile so things stack cleanly */
@media (max-width: 768px) {
  .who-offset-top,
  .who-offset-bottom {
    transform: translateY(0);
  }
}

/* ===========================
   Capabilities section
   =========================== */

.cap-heading-gold {
  /* Safety net if Tailwind config ever changes */
  color: #d7b874;
}

/* Utility class for any shared capability image styling if needed later */
.capability-image {
  transition: opacity 0.3s ease-out;
}

/* ===========================
   Why H.E.S.G. image grid
   =========================== */

.why-layout {
  align-items: center;
}

.why-image-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  background-color: #020712;
}

.why-offset-top {
  transform: translateY(-18px);
}

.why-offset-bottom {
  transform: translateY(18px);
}

@media (max-width: 768px) {
  .why-offset-top,
  .why-offset-bottom {
    transform: translateY(0);
  }
}

/* ===========================
   Stats styling
   =========================== */

.stat-number {
  letter-spacing: 0.02em;
}

/* ===========================
   Contact section layout
   =========================== */

.contact-layout {
  align-items: stretch;
}

.contact-card-wrapper {
  display: flex;
}

/* Make the quote card fill the column height and center its contents */
.contact-card {
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Slight extra spacing polish on very narrow screens */
@media (max-width: 640px) {
  .contact-card {
    margin-top: 1rem;
  }
}

/* ===========================
   Small utility tweaks
   =========================== */

/* If you ever see horizontal scrollbars, this keeps things tidy */
body {
  overflow-x: hidden;
}

/* Improve image rendering slightly on some displays */
img {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}