/* =====================================================================
   Hero (#intro)
   The theme points the background at an absolute URL on a host that is
   now offline, and sets height:100vh — so the band rendered as a full
   screen of nothing. This loads after style.css and replaces that with a
   designed gradient, keeping the original photo as an optional layer:
   drop cio-bg-6.jpg into assets/images/ and it takes over automatically.
   ===================================================================== */
#intro {
  height: auto;
  min-height: 62vh;
  padding: 90px 0 70px;
  background-color: #0e1b2b;
  background-image:
    radial-gradient(1100px 520px at 78% 8%, rgba(249, 62, 62, .26) 0%, rgba(249, 62, 62, 0) 62%),
    radial-gradient(900px 460px at 12% 92%, rgba(24, 118, 204, .30) 0%, rgba(24, 118, 204, 0) 60%),
    linear-gradient(160deg, #14263c 0%, #0e1b2b 55%, #080f18 100%),
    url("../images/cio-bg-6.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-blend-mode: normal, normal, normal, overlay;
  position: relative;
}
/* subtle grid texture so the flat area reads as designed, not unfinished */
#intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

#intro .intro-container {
  position: relative;   /* theme absolutely-positions this inside a 100vh box */
  inset: auto;
  top: auto;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  gap: 6px;
}
#intro .intro-container img {
  max-width: 260px;
  height: auto;
  margin-bottom: 18px;
}
#intro h1 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
#intro .intro-container p {
  margin: 0 0 6px;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: .06em;
  color: #d7e2ee;
}
#intro .intro-container p:last-of-type { color: #ff8a8a; }

#intro .about-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 13px 40px;
  border-radius: 40px;
  background: #F93E3E;
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(249, 62, 62, .9);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
#intro .about-btn:hover {
  background: #e02a2a;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(249, 62, 62, 1);
}

@media (max-width: 600px) {
  /* the theme's inline rule pins #intro to 206px on small screens */
  #intro {
    top: 0 !important;
    height: auto !important;
    min-height: 0;
    padding: 64px 0 52px;
  }
  #intro .intro-container img { max-width: 190px; margin-bottom: 14px; }
  #intro .about-btn { padding: 11px 30px; }
}