/* === g-contact-split — greenfield OUTLIER (multi-zone), slot-contract form === */
/* Body surface = core --ssla-bg-color on root (§7.1). Hero zone = sanctioned   */
/* sub-element token --ssla-hero-bg (§7.2 carve-out). Tone classes set          */
/* FOREGROUND only; body bg tone comes from the shared [data-ssla-variant-tone] */
/* rule in 0-shared.css (§7.3) — no per-section surface tone rule here.         */

/* ── Root / body surface ── */
.ssla-g-contact-split {
  width: 100%;
  position: relative;
  background-color: var(--ssla-bg-color, #ffffff);
  color: var(--g-contact-split-fg, #1a1a1a);
}

/* ── Hero zone (sub-element token; opaque overlay above the body surface) ── */
.ssla-g-contact-split-hero {
  background-color: var(--ssla-hero-bg, var(--shell-bg-dark-cool, #1F2937));
  color: #ffffff;
}
/* Luminance-driven tone flip. data-ssla-hero-tone is stamped at SSR (bridge
   render, from the hero_bg luminance) and live by the overlay editor JS.
   FOREGROUND only — never repaints the surface.
   v3.23.01: the section-level rule in 0-shared.css
   `.ssla-section[class*="ssla-g-"][class*="--tone-light"] :where(h1,h2,…)`
   (specificity 0,3,0) paints EVERY greenfield heading #1a1a1a — which on the
   DARK hero island read dark-on-dark (live-confirmed). Eyebrow/body only
   inherit the container color so they flipped fine, but the heading is hit
   directly. These rules target the hero text elements explicitly with higher
   specificity (0,4,0) so the hero zone's own tone wins inside its island. */
.ssla-g-contact-split-hero[data-ssla-hero-tone="light"] { color: #1a1a1a; }
.ssla-g-contact-split-hero[data-ssla-hero-tone="dark"]  { color: #ffffff; }
.ssla-g-contact-split .ssla-g-contact-split-hero[data-ssla-hero-tone="dark"] .ssla-g-contact-split-hero-heading,
.ssla-g-contact-split .ssla-g-contact-split-hero[data-ssla-hero-tone="dark"] .ssla-g-contact-split-hero-eyebrow,
.ssla-g-contact-split .ssla-g-contact-split-hero[data-ssla-hero-tone="dark"] .ssla-g-contact-split-hero-body { color: #ffffff; }
.ssla-g-contact-split .ssla-g-contact-split-hero[data-ssla-hero-tone="light"] .ssla-g-contact-split-hero-heading,
.ssla-g-contact-split .ssla-g-contact-split-hero[data-ssla-hero-tone="light"] .ssla-g-contact-split-hero-eyebrow,
.ssla-g-contact-split .ssla-g-contact-split-hero[data-ssla-hero-tone="light"] .ssla-g-contact-split-hero-body { color: #1a1a1a; }

.ssla-g-contact-split-hero-inner {
  max-width: var(--g-contact-split-content-max-width, 1120px);
  margin: 0 auto;
  padding: var(--g-contact-split-section-padding, 80px) 48px;
  text-align: center;
}
.ssla-g-contact-split-hero-eyebrow {
  font-size: var(--g-contact-split-eyebrow-size, 13px);
  letter-spacing: var(--g-contact-split-eyebrow-letter, 0.12em);
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 16px;
}
.ssla-g-contact-split-hero-heading {
  font-family: var(--g-contact-split-heading-family, inherit);
  font-size: var(--g-contact-split-heading-size, 44px);
  font-weight: var(--g-contact-split-heading-weight, 800);
  line-height: 1.1;
  margin: 0 0 18px;
}
.ssla-g-contact-split-hero-body {
  font-family: var(--g-contact-split-body-family, inherit);
  font-size: var(--g-contact-split-body-size, 18px);
  line-height: var(--g-contact-split-body-line-height, 1.6);
  max-width: 640px;
  margin: 0 auto;
}

/* ── Content zone: two-column split (info + form) ── */
.ssla-g-contact-split-inner {
  max-width: var(--g-contact-split-content-max-width, 1120px);
  margin: 0 auto;
  padding: var(--g-contact-split-section-padding, 80px) 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-contact-split-column-gap, 56px);
  align-items: start;
}
.alignfull .ssla-g-contact-split-inner,
.alignfull .ssla-g-contact-split-hero-inner {
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}

/* Info column */
.ssla-g-contact-split-eyebrow {
  color: var(--g-contact-split-eyebrow, inherit);
  font-size: var(--g-contact-split-eyebrow-size, 13px);
  letter-spacing: var(--g-contact-split-eyebrow-letter, 0.12em);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.ssla-g-contact-split-heading {
  font-family: var(--g-contact-split-heading-family, inherit);
  font-size: var(--g-contact-split-heading-size, 30px);
  font-weight: var(--g-contact-split-heading-weight, 800);
  line-height: 1.15;
  margin: 0 0 16px;
}
.ssla-g-contact-split-body {
  font-family: var(--g-contact-split-body-family, inherit);
  font-size: var(--g-contact-split-body-size, 16px);
  line-height: var(--g-contact-split-body-line-height, 1.6);
  margin: 0 0 28px;
}

/* Reason cards (rich repeater content) */
.ssla-g-contact-split-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 28px;
}
.ssla-g-contact-split-reason h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.ssla-g-contact-split-reason p  { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.85; }

.ssla-g-contact-split-cta {
  display: inline-block;
  font-weight: 700;
  color: inherit;
  border-bottom: 1.5px solid currentColor;
  text-decoration: none;
}

/* Form column — host for the embedded SSLA_Form_Renderer output */
.ssla-g-contact-split-form { width: 100%; }

@media (max-width: 860px) {
  .ssla-g-contact-split-inner   { grid-template-columns: 1fr; gap: 40px; }
  .ssla-g-contact-split-reasons { grid-template-columns: 1fr; }
}