/* ============================================================
   Ultra Hero — composable 3-tier hero system

   No-photo (Tier 3 / app):
     <section class="ultra-hero uh-app [uh-accent-ecom]">
       <div class="uh-fit">
         <div class="uh-eyebrow">...</div>
         <h1>...</h1>
         <h2>...</h2>
         <div class="uh-partners"><img>...</div>
       </div>
     </section>

   With-photo (Tier 1 / trust, Tier 2 / infra):
     <section class="ultra-hero uh-photo uh-grad-{dir} uh-bg-{photo}">
       <div class="uh-bg"></div>
       <div class="uh-fit">...same as above...</div>
     </section>

   Direction modifiers (uh-grad-*):
     right    — dark gradient on right 65pct (for person-on-left photos)
     left     — dark gradient on left 65pct (for person-on-right photos)
     bottom   — dark gradient from bottom (for server-rack photos, content at top)

   Photo modifiers (uh-bg-*):
     Defined per-page below. Each sets background-image + background-position
     on the .uh-bg div.
   ============================================================ */

.ultra-hero,
.ultra-hero *,
.ultra-hero *::before,
.ultra-hero *::after {
  box-sizing: border-box;
}

.ultra-hero {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  padding: 90px 24px 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 5px solid #1b79cf;
  background-color: #0c1929;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.ultra-hero .uh-fit {
  position: relative;
  z-index: 10;
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  padding: 0;
}

.ultra-hero .uh-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.ultra-hero h1 {
  font-size: clamp(2.4rem, 5.8vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: #ffffff !important;
  margin: 0 0 22px;
  padding: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  font-family: inherit;
  text-transform: none;
  text-wrap: balance;
}

/* Long-H1 modifier — scope down font-size for 38+ char H1s so they fit single-line */
.ultra-hero.uh-h1-long h1 {
  font-size: clamp(1.75rem, 4.6vw, 3.4rem);
}

.ultra-hero h2 {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.88) !important;
  margin: 0 auto 40px;
  padding: 0;
  max-width: 840px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  text-wrap: balance;
}

.ultra-hero .uh-partners {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.20);
}

.ultra-hero .uh-partners img {
  max-width: 100px;
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.78;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: opacity 0.2s ease;
}
.ultra-hero .uh-partners img:hover { opacity: 1; }

.ultra-hero .uh-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

/* ============================================================
   Tier 3 — uh-app — no photo, diagonal blue gradient
   ============================================================ */
.ultra-hero.uh-app {
  background: linear-gradient(115deg,
    #0c1929 0%,
    #14375f 35%,
    #1a7fd4 65%,
    #1f4a82 100%);
}
.ultra-hero.uh-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(77,166,232,0.20) 25%, rgba(77,166,232,0.06) 45%, transparent 65%);
  z-index: 2;
  pointer-events: none;
}
.ultra-hero.uh-app::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 15% 25%, rgba(77,166,232,0.22) 0%, transparent 55%);
  z-index: 3;
  pointer-events: none;
}

/* Accent — e-commerce orange spot (Magento, OpenCart, osCommerce) */
.ultra-hero.uh-app.uh-accent-ecom::before {
  background:
    linear-gradient(115deg, transparent 0%, rgba(77,166,232,0.20) 25%, rgba(77,166,232,0.06) 45%, transparent 65%),
    radial-gradient(ellipse at 90% 80%, rgba(254,159,13,0.18) 0%, transparent 50%);
}

/* ============================================================
   Tier 1/2 — uh-photo — direction modifiers
   ============================================================ */

/* Right-side dark gradient (for person-on-left photos) */
.ultra-hero.uh-photo.uh-grad-right::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 65%;
  background: linear-gradient(270deg,
    rgba(12,25,41,0.96) 0%,
    rgba(20,55,95,0.90) 40%,
    rgba(26,127,212,0.55) 70%,
    transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.ultra-hero.uh-photo.uh-grad-right::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  background: linear-gradient(-115deg, transparent 25%, rgba(77,166,232,0.22) 45%, transparent 65%);
  z-index: 4;
  pointer-events: none;
}

/* Left-side dark gradient (for person-on-right photos) */
.ultra-hero.uh-photo.uh-grad-left::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 65%;
  background: linear-gradient(90deg,
    rgba(12,25,41,0.96) 0%,
    rgba(20,55,95,0.90) 40%,
    rgba(26,127,212,0.55) 70%,
    transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.ultra-hero.uh-photo.uh-grad-left::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 55%;
  background: linear-gradient(115deg, transparent 25%, rgba(77,166,232,0.22) 45%, transparent 65%);
  z-index: 4;
  pointer-events: none;
}

/* Bottom dark gradient (for server-rack / infrastructure photos) */
.ultra-hero.uh-photo.uh-grad-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(12,25,41,0.30) 22%,
    rgba(20,55,95,0.70) 50%,
    rgba(20,55,95,0.93) 75%,
    rgba(12,25,41,0.97) 100%);
  z-index: 3;
  pointer-events: none;
}
.ultra-hero.uh-photo.uh-grad-bottom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(77,166,232,0.20) 50%, transparent 65%);
  z-index: 4;
  pointer-events: none;
}

/* ============================================================
   Photo URL classes — page-keyed image references
   ============================================================ */

/* contact-ultra.jpg — single tech at laptop (person on LEFT) */
.ultra-hero.uh-bg-contact .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/contact-ultra.jpg');
  background-position: left center;
}

/* faster-web-servers.jpg — Dell PowerEdge 2950 rack (no people) */
.ultra-hero.uh-bg-rack-edge .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/faster-web-servers.jpg');
  background-position: center top;
}

/* seattle-servers.jpg — Dell PowerVault MD SAS array (dramatic, no people) */
.ultra-hero.uh-bg-rack-array .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/seattle-servers.jpg');
  background-position: center center;
}

/* seattle-web-servers.jpg — Dell PowerEdge servers close-up (no people) */
.ultra-hero.uh-bg-rack-detail .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/seattle-web-servers.jpg');
  background-position: center center;
}

/* about-ultra.jpg — 2 Ultra-branded techs at console (faces LEFT) */
.ultra-hero.uh-bg-techs-console .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/about-ultra.jpg');
  background-position: left center;
}

/* onsite-technicians.jpg — same shoot as about-ultra, tighter crop */
.ultra-hero.uh-bg-techs-onsite .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/onsite-technicians.jpg');
  background-position: left center;
}

/* owned-operated-servers.jpg — single tech at server (person on RIGHT) */
.ultra-hero.uh-bg-tech-server .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/owned-operated-servers.jpg');
  background-position: right center;
}

/* award-winning-host.jpg — silver star trophy on blue background (trophy on RIGHT) */
.ultra-hero.uh-bg-award-trophy .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/award-winning-host.jpg');
  background-position: right center;
}

/* green-hosting-provider.jpg — Pacific Northwest hydro dam with mountains + rainbow */
.ultra-hero.uh-bg-green-hydro .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/green-hosting-provider.jpg');
  background-position: center center;
}

/* server-hardware-upgrade.jpg — single Ultra tech installing RAM (face center, hands center) */
.ultra-hero.uh-bg-tech-ram .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/server-hardware-upgrade.jpg');
  background-position: center center;
}

/* ultra-customer-service.jpg — single Ultra tech profile at laptop (face LEFT) — pair with uh-grad-right */
.ultra-hero.uh-bg-tech-laptop-side .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/ultra-customer-service.jpg');
  background-position: left center;
}

/* fixing-server-harddrive.jpg — single Ultra tech racking Dell PowerEdge (person RIGHT) — pair with uh-grad-left */
.ultra-hero.uh-bg-tech-rack-poweredge .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/fixing-server-harddrive.jpg');
  background-position: right center;
}

/* troubleshooting-hosting.jpg — single Ultra tech pointing at server LCD (person RIGHT) — pair with uh-grad-left */
.ultra-hero.uh-bg-tech-lcd .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/troubleshooting-hosting.jpg');
  background-position: right center;
}

/* david-ultra-website.png — wide desk shot: laptop with Ultra-branded site on LEFT, person on RIGHT, office phone + mug. Pair with uh-grad-right (gradient covers person, keeps laptop visible) */
.ultra-hero.uh-bg-transfer-david .uh-bg {
  background-image: url('https://ultracdn.ultrawebhosting.com/images/headers/david-ultra-website.png');
  background-position: center center;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .ultra-hero { min-height: 420px; padding: 70px 18px 50px; }
  .ultra-hero h1 { font-size: 2.1rem; }
  .ultra-hero h2 { font-size: 0.95rem; margin-bottom: 32px; }
  .ultra-hero .uh-eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; margin-bottom: 18px; }
  .ultra-hero .uh-partners {
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 24px;
    padding-top: 22px;
  }
  .ultra-hero .uh-partners img { max-width: 80px; height: 24px; }
}

@media (max-width: 480px) {
  .ultra-hero { min-height: 380px; padding: 60px 16px 44px; }
  .ultra-hero h1 { font-size: 1.75rem; }
  .ultra-hero h2 { font-size: 0.88rem; margin-bottom: 26px; }
  .ultra-hero .uh-partners { gap: 14px 18px; }
  .ultra-hero .uh-partners img { max-width: 64px; height: 20px; }
}