/* =====================================================================
   SHIM-ME Hub — Contact Hero shortcode CSS
   Scoped to #shim-contact-hero (the WPBakery row's el_id).
   The developer sets the row to "Stretch row and content" + dark bg;
   this file owns the inner band: grid/glow ornament, constrained inner
   container, headline, lead, and the 1-2-3 steps rail.

   Cascade armor: Total injects inline <style> AFTER the plugin stylesheet,
   so color/font props lead with the row id and use !important (mirrors
   shim-global-tokens.css). Tokens only — no hex literals.
   ===================================================================== */

#shim-contact-hero {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  color: var(--shim-text);
}

/* background ornaments — copied from the hero pattern */
#shim-contact-hero .shim-contact-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--shim-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--shim-grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 28% 35%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at 28% 35%, #000 30%, transparent 78%);
}
#shim-contact-hero .shim-contact-hero__glow {
  position: absolute;
  right: -8%; top: 0;
  width: 720px; height: 720px;
  /* Anchor to the top edge, then lift the box by 40% of its own height so the
     radial's bright center lands in the TOP-right corner — independent of how
     tall the section ends up (a % top drifted to mid-height). */
  transform: translateY(-40%);
  background: radial-gradient(circle, var(--shim-red-glow) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

/* constrained inner container — same pattern as .shim-hero__inner */
#shim-contact-hero .shim-contact-hero__inner {
  position: relative;
  max-width: var(--shim-container);
  margin: 0 auto;
  padding: 0 var(--shim-gutter);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  align-items: end;
  min-height: 420px;
}

/* headline — red highlight comes from the global .shim-hl !important rule */
body #shim-contact-hero .shim-contact__headline {
  font-family: var(--shim-display) !important;
  font-weight: 900 !important;
  font-size: clamp(50px, 6.6vw, 108px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--shim-text) !important;
  margin: 14px 0 24px;
}

body #shim-contact-hero .shim-contact-hero__sub {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--shim-text-dim) !important;
  max-width: 52ch;
  margin: 0;
}

/* ---- Steps rail (right of the hero, on a left hairline) ----
   Bottom-aligns via the inner grid's align-items:end so the last step
   sits level with the lead copy. */
#shim-contact-hero .shim-contact__steps {
  list-style: none;
  margin: 0;
  padding: 6px 0 6px 30px;
  border-left: 1px solid var(--shim-line);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
#shim-contact-hero .shim-contact__steps-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
body #shim-contact-hero .shim-contact__steps-num {
  font-family: var(--shim-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--shim-red) !important;
  padding-top: 2px;
}
#shim-contact-hero .shim-contact__steps-body { display: block; }
body #shim-contact-hero .shim-contact__steps-title {
  display: block;
  font-family: var(--shim-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: var(--shim-text) !important;
  margin-bottom: 4px;
}
body #shim-contact-hero .shim-contact__steps-text {
  display: block;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--shim-text-dim) !important;
}

/* ---------- Responsive ----------------------------------------------- */
@media (max-width: 1024px) {
  #shim-contact-hero .shim-contact-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
    min-height: 0;
  }
  #shim-contact-hero .shim-contact__steps {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--shim-line);
    padding-top: 32px;
  }
}
@media (max-width: 600px) {
  #shim-contact-hero .shim-contact-hero__inner {
    padding-left: 22px;
    padding-right: 22px;
  }
}