:root {
  --hspg-navy: #0c2434;
  --hspg-blue: #1677ff;
  --hspg-sky: #e8f5ff;
  --hspg-mint: #eafff2;
  --hspg-green: #22a06b;
  --hspg-gold: #c99a3a;
  --hspg-ink: #102536;
  --hspg-muted: #5d7280;
  --hspg-line: rgba(16, 37, 54, 0.12);
  --hspg-card: rgba(255, 255, 255, 0.82);
  --hspg-radius: 28px;
  --hspg-shadow: 0 22px 70px rgba(12, 36, 52, 0.12);
}

.hspg-page,
.hspg-header,
.hspg-footer,
.hspg-page * ,
.hspg-header *,
.hspg-footer * {
  box-sizing: border-box;
}

.hspg-page {
  width: 100%;
  max-width: none;
  color: var(--hspg-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(22,119,255,.12), transparent 34rem),
    radial-gradient(circle at 90% 20%, rgba(34,160,107,.10), transparent 28rem),
    linear-gradient(180deg, #fbfdff 0%, #f8fbfc 46%, #ffffff 100%);
}

.hspg-header {
  width: 100%;
  position: relative;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hspg-line);
}

.hspg-header__bar {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hspg-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--hspg-navy);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -.04em;
}

.hspg-logo__mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--hspg-navy), var(--hspg-blue));
  box-shadow: 0 14px 30px rgba(22, 119, 255, .23);
}

.hspg-logo__text { font-size: clamp(1.3rem, 2vw, 1.75rem); }

.hspg-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hspg-nav > a,
.hspg-nav__mega-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  color: var(--hspg-ink);
  text-decoration: none;
  font-weight: 750;
  border-radius: 999px;
}

.hspg-nav > a:hover,
.hspg-nav__mega-trigger:hover {
  background: var(--hspg-sky);
  color: var(--hspg-blue);
}

.hspg-nav__mega-wrap { position: relative; }
.hspg-nav__mega-wrap:hover .hspg-mega-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }

.hspg-mega-menu {
  position: absolute;
  right: -180px;
  top: 52px;
  width: min(840px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--hspg-line);
  border-radius: 26px;
  box-shadow: var(--hspg-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all .2s ease;
}

.hspg-mega-card {
  min-width: 0;
  text-decoration: none;
  color: var(--hspg-ink);
  background: linear-gradient(180deg, #fff, #f8fbff);
  border: 1px solid var(--hspg-line);
  border-radius: 20px;
  padding: 16px;
}

.hspg-mega-card span,
.hspg-card-kicker,
.hspg-section-kicker {
  display: inline-flex;
  color: var(--hspg-blue);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 850;
}

.hspg-mega-card strong { display: block; margin-top: 8px; font-size: .98rem; line-height: 1.15; }
.hspg-mega-card small { display: block; margin-top: 8px; color: var(--hspg-muted); line-height: 1.4; }

.hspg-header__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .82rem;
  line-height: 1.1;
}

.hspg-header__contact a { color: var(--hspg-muted); text-decoration: none; font-weight: 750; }
.hspg-header__contact a:hover { color: var(--hspg-blue); }

.hspg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}

.hspg-btn:hover { transform: translateY(-2px); }
.hspg-btn--primary { color: #fff; background: linear-gradient(135deg, var(--hspg-blue), #19a9ff); box-shadow: 0 16px 36px rgba(22, 119, 255, .28); }
.hspg-btn--secondary { color: var(--hspg-navy); background: #fff; border: 1px solid var(--hspg-line); box-shadow: 0 12px 30px rgba(12,36,52,.08); }
.hspg-btn--light { color: var(--hspg-navy); background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.12); }

.hspg-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--hspg-line);
  border-radius: 15px;
  background: #fff;
}
.hspg-menu-toggle span { display: block; width: 19px; height: 2px; margin: 4px auto; background: var(--hspg-navy); border-radius: 2px; }
.hspg-mobile-panel { display: none; }

.hspg-hero,
.hspg-page-hero,
.hspg-section,
.hspg-form-card,
.hspg-cta-band {
  width: min(1240px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

.hspg-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
  min-height: 680px;
  padding: clamp(54px, 8vw, 104px) 0;
}

.hspg-hero h1,
.hspg-page-hero h1 {
  margin: 12px 0 20px;
  color: var(--hspg-navy);
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: .88;
  letter-spacing: -.075em;
}

.hspg-hero p,
.hspg-page-hero p,
.hspg-section > p,
.hspg-split p {
  color: var(--hspg-muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.65;
}

.hspg-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hspg-hero__visual { position: relative; min-height: 520px; display: grid; place-items: center; }

.hspg-hero__photo,
.hspg-image-card {
  width: min(100%, 520px);
  min-height: 420px;
  border-radius: 46px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.1)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 620"><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="1"><stop stop-color="%23e8f5ff"/><stop offset=".52" stop-color="%23ffffff"/><stop offset="1" stop-color="%23eafff2"/></linearGradient></defs><rect width="800" height="620" fill="url(%23g)"/><path d="M0 400 C150 300 250 360 390 260 S650 160 800 235 V620 H0Z" fill="%231677ff" opacity=".10"/><path d="M0 478 C210 370 360 500 520 360 S700 310 800 360 V620 H0Z" fill="%2322a06b" opacity=".12"/><g opacity=".42" stroke="%230c2434" stroke-width="2" fill="none"><path d="M120 150h180v120H120z"/><path d="M330 110h220v160H330z"/><path d="M585 175h120v95H585z"/><path d="M160 310h130v90H160z"/><path d="M340 320h170v120H340z"/><path d="M560 315h115v115H560z"/></g><g fill="%231677ff" opacity=".35"><circle cx="190" cy="210" r="8"/><circle cx="440" cy="190" r="8"/><circle cx="628" cy="224" r="8"/><circle cx="420" cy="380" r="8"/></g></svg>') center/cover no-repeat;
  box-shadow: var(--hspg-shadow);
  border: 1px solid rgba(255,255,255,.8);
}

.hspg-orbit-card {
  position: absolute;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--hspg-line);
  box-shadow: 0 14px 42px rgba(12,36,52,.12);
  font-weight: 850;
  color: var(--hspg-navy);
  animation: hspgFloat 4s ease-in-out infinite;
}
.hspg-orbit-card--one { top: 56px; left: 20px; }
.hspg-orbit-card--two { top: 120px; right: 0; animation-delay: .5s; }
.hspg-orbit-card--three { bottom: 120px; left: 0; animation-delay: 1s; }
.hspg-orbit-card--four { bottom: 62px; right: 46px; animation-delay: 1.5s; }
@keyframes hspgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hspg-three-paths {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto clamp(48px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hspg-path-card,
.hspg-brand-card {
  display: block;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--hspg-radius);
  background: var(--hspg-card);
  border: 1px solid rgba(16,37,54,.1);
  box-shadow: 0 18px 50px rgba(12,36,52,.08);
  color: var(--hspg-ink);
  text-decoration: none;
}
.hspg-path-card:hover,
.hspg-brand-card:hover { transform: translateY(-4px); box-shadow: var(--hspg-shadow); }
.hspg-path-card span { color: var(--hspg-green); font-weight: 900; }
.hspg-path-card h2,
.hspg-brand-card h3,
.hspg-section h2,
.hspg-form-card h2,
.hspg-cta-band h2 {
  color: var(--hspg-navy);
  margin: 10px 0 12px;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.hspg-path-card h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.hspg-path-card p,
.hspg-brand-card p { color: var(--hspg-muted); line-height: 1.55; margin: 0; }

.hspg-section { padding: clamp(52px, 8vw, 96px) 0; }
.hspg-section h2,
.hspg-form-card h2,
.hspg-cta-band h2 { font-size: clamp(2.15rem, 5vw, 4.25rem); }

.hspg-motion-section {
  padding: clamp(34px, 5vw, 62px);
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(232,245,255,.86));
  border: 1px solid var(--hspg-line);
  box-shadow: var(--hspg-shadow);
}

.hspg-steps {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.hspg-steps div,
.hspg-mini-list div {
  border-radius: 22px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--hspg-line);
}
.hspg-steps strong { display: block; color: var(--hspg-blue); font-size: 1.05rem; margin-bottom: 8px; }
.hspg-steps span { display: block; color: var(--hspg-muted); line-height: 1.45; font-size: .92rem; }

.hspg-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.hspg-brand-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.hspg-brand-grid--compact .hspg-brand-card { padding: 18px; border-radius: 22px; }
.hspg-brand-grid--compact .hspg-brand-card p { font-size: .92rem; }

.hspg-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
  align-items: center;
  gap: clamp(30px, 6vw, 72px);
}
.hspg-image-card--aerial { background-position: center; min-height: 440px; }
.hspg-image-card--street { min-height: 420px; }

.hspg-mini-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.hspg-mini-list div { color: var(--hspg-navy); font-weight: 850; }

.hspg-page-hero {
  padding: clamp(62px, 9vw, 122px) 0 clamp(34px, 5vw, 64px);
}
.hspg-page-hero > div {
  max-width: 860px;
}

.hspg-form-card {
  padding: clamp(28px, 5vw, 56px);
  margin-top: clamp(32px, 6vw, 70px);
  margin-bottom: clamp(44px, 8vw, 100px);
  border-radius: 42px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--hspg-line);
  box-shadow: var(--hspg-shadow);
}
.hspg-form-card__intro { max-width: 820px; }
.hspg-form-card__intro p { color: var(--hspg-muted); line-height: 1.6; }

.hspg-intake-form {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.hspg-field { display: grid; gap: 8px; min-width: 0; }
.hspg-field--full { grid-column: 1 / -1; }
.hspg-field span,
.hspg-checkbox span { font-weight: 800; color: var(--hspg-navy); }
.hspg-field input,
.hspg-field select,
.hspg-field textarea {
  width: 100%;
  min-height: 54px;
  border-radius: 17px;
  border: 1px solid rgba(16,37,54,.16);
  background: #fff;
  padding: 13px 15px;
  font: inherit;
  color: var(--hspg-ink);
}
.hspg-field textarea { resize: vertical; min-height: 118px; }
.hspg-field input:focus,
.hspg-field select:focus,
.hspg-field textarea:focus { outline: 3px solid rgba(22,119,255,.16); border-color: var(--hspg-blue); }
.hspg-checkbox { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.hspg-checkbox input { margin-top: 5px; }
.hspg-form-card__legal { color: var(--hspg-muted); font-size: .88rem; line-height: 1.5; }
.hspg-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hspg-submit-btn[disabled] { cursor: wait; opacity: .82; }
.hspg-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: hspgSpin .7s linear infinite;
}
.hspg-submit-btn.is-loading .hspg-spinner { display: inline-block; }
@keyframes hspgSpin { to { transform: rotate(360deg); } }
.hspg-form-message { font-weight: 750; color: var(--hspg-muted); }
.hspg-form-message.is-success { color: var(--hspg-green); }
.hspg-form-message.is-error { color: #b42318; }

.hspg-legal {
  width: min(1240px, calc(100% - 32px));
  margin: 24px auto;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--hspg-line);
  color: var(--hspg-muted);
  line-height: 1.55;
  font-size: .92rem;
}

.hspg-cta-band {
  margin-top: clamp(44px, 8vw, 100px);
  margin-bottom: clamp(44px, 8vw, 100px);
  padding: clamp(32px, 5vw, 58px);
  border-radius: 42px;
  background: linear-gradient(135deg, var(--hspg-navy), #173f5c 58%, var(--hspg-blue));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: var(--hspg-shadow);
}
.hspg-cta-band h2 { color: #fff; margin: 10px 0; }
.hspg-cta-band p { color: rgba(255,255,255,.82); max-width: 760px; line-height: 1.6; }
.hspg-cta-band .hspg-section-kicker { color: #aee4ff; }

.hspg-footer {
  width: 100%;
  color: rgba(255,255,255,.82);
  background: var(--hspg-navy);
  padding: clamp(42px, 7vw, 82px) 0 28px;
}
.hspg-footer__top,
.hspg-footer__disclaimers,
.hspg-footer__bottom {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}
.hspg-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: start;
}
.hspg-footer__brand { color: #fff; font-size: 2rem; font-weight: 950; letter-spacing: -.06em; margin-bottom: 12px; }
.hspg-footer a { color: #fff; text-decoration: none; }
.hspg-footer .hspg-brand-card { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.14); }
.hspg-footer .hspg-brand-card h3 { color: #fff; }
.hspg-footer .hspg-brand-card p { color: rgba(255,255,255,.72); }
.hspg-footer__disclaimers {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .84rem;
  line-height: 1.5;
  color: rgba(255,255,255,.66);
}
.hspg-footer__bottom {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  font-size: .9rem;
}
.hspg-footer__links { display: flex; gap: 16px; }

.hspg-copy { max-width: 960px; }
.hspg-copy h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); margin-top: 34px; }
.hspg-copy p { color: var(--hspg-muted); line-height: 1.65; }

@media (max-width: 1120px) {
  .hspg-header__contact,
  .hspg-header__cta { display: none; }
  .hspg-mega-menu { right: -250px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hspg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hspg-header__bar { min-height: 72px; width: min(100% - 24px, 1240px); }
  .hspg-nav { display: none; }
  .hspg-menu-toggle { display: block; }
  .hspg-mobile-panel {
    width: min(100% - 24px, 1240px);
    margin: 0 auto 12px;
    padding: 14px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--hspg-line);
    box-shadow: var(--hspg-shadow);
  }
  .hspg-mobile-panel.is-open { display: grid; gap: 8px; }
  .hspg-mobile-panel a { color: var(--hspg-navy); text-decoration: none; font-weight: 800; padding: 12px 10px; border-radius: 14px; }
  .hspg-mobile-panel a:hover { background: var(--hspg-sky); color: var(--hspg-blue); }
  .hspg-mobile-panel__tagline { color: var(--hspg-muted); line-height: 1.45; margin: 6px 10px 8px; }

  .hspg-hero,
  .hspg-split,
  .hspg-footer__top { grid-template-columns: 1fr; }
  .hspg-hero { min-height: auto; padding-top: 48px; }
  .hspg-hero__visual { min-height: 430px; }
  .hspg-hero__photo { min-height: 360px; }
  .hspg-three-paths,
  .hspg-brand-grid,
  .hspg-brand-grid--compact { grid-template-columns: 1fr; }
  .hspg-steps { grid-template-columns: 1fr; }
  .hspg-intake-form { grid-template-columns: 1fr; }
  .hspg-field--full { grid-column: auto; }
  .hspg-cta-band { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 540px) {
  .hspg-hero,
  .hspg-page-hero,
  .hspg-section,
  .hspg-form-card,
  .hspg-cta-band,
  .hspg-three-paths,
  .hspg-footer__top,
  .hspg-footer__disclaimers,
  .hspg-footer__bottom {
    width: min(100% - 22px, 1240px);
  }
  .hspg-hero h1,
  .hspg-page-hero h1 { font-size: clamp(2.7rem, 17vw, 4rem); }
  .hspg-form-card,
  .hspg-motion-section,
  .hspg-cta-band { border-radius: 28px; padding: 24px; }
  .hspg-mini-list { grid-template-columns: 1fr; }
  .hspg-btn { width: 100%; white-space: normal; text-align: center; }
  .hspg-form-actions { display: grid; }
}

/* =========================================================
   HSPG Site Core v1.1 — Relevant Graphics + Color Pop Upgrade
   Replaces abstract hero/photo treatments with acquisition,
   disposition, capital, and brand-ecosystem visuals.
========================================================= */
:root{
  --hspg-navy:#061a2b;
  --hspg-ink:#0b2940;
  --hspg-muted:#536b7d;
  --hspg-blue:#0b7ff3;
  --hspg-blue-2:#00a3ff;
  --hspg-green:#19b978;
  --hspg-teal:#08a5a7;
  --hspg-gold:#d8a540;
  --hspg-sky:#eaf6ff;
  --hspg-mint:#eafaf3;
  --hspg-line:rgba(6,26,43,.13);
  --hspg-shadow:0 28px 72px rgba(6,26,43,.14);
  --hspg-shadow-soft:0 16px 44px rgba(6,26,43,.09);
}

.hspg-page--v11{
  background:
    radial-gradient(circle at 9% 7%, rgba(0,163,255,.13), transparent 32%),
    radial-gradient(circle at 91% 18%, rgba(25,185,120,.13), transparent 30%),
    linear-gradient(180deg,#f7fbff 0%,#eef7ff 42%,#f7fbff 100%);
  padding-bottom:48px;
}

.hspg-hero--ecosystem{
  width:min(1240px,calc(100% - 32px));
  margin:28px auto 30px;
  padding:clamp(34px,5vw,58px);
  min-height:auto;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);
  gap:clamp(28px,4vw,48px);
  background:
    radial-gradient(circle at 8% 18%, rgba(11,127,243,.16), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(25,185,120,.12), transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f3faff 58%,#eefbf5 100%);
  border:1px solid rgba(6,26,43,.10);
  border-radius:38px;
  box-shadow:var(--hspg-shadow);
}

.hspg-hero--ecosystem h1{
  max-width:720px;
  font-size:clamp(3rem,6.5vw,6.4rem);
  letter-spacing:-.075em;
}

.hspg-hero--ecosystem p{
  max-width:690px;
  color:rgba(11,41,64,.76);
}

.hspg-hero-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:26px;
}
.hspg-hero-points div{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(6,26,43,.09);
  box-shadow:0 12px 28px rgba(6,26,43,.06);
}
.hspg-hero-points strong{
  display:block;
  color:var(--hspg-blue);
  font-size:.92rem;
  margin-bottom:5px;
}
.hspg-hero-points span{
  display:block;
  color:var(--hspg-muted);
  font-size:.82rem;
  line-height:1.45;
}

.hspg-visual-frame{
  position:relative;
  min-height:auto;
  width:100%;
  display:grid;
  place-items:center;
  border-radius:32px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(235,247,255,.88));
  border:1px solid rgba(6,26,43,.11);
  box-shadow:0 24px 58px rgba(6,26,43,.14);
  overflow:hidden;
}
.hspg-visual-frame img{
  display:block;
  width:100%;
  height:auto;
  opacity:1;
  filter:saturate(1.08) contrast(1.04) brightness(.96);
}
.hspg-visual-frame--opportunity img,
.hspg-visual-frame--ecosystem-small img,
.hspg-visual-frame--inner img{
  filter:saturate(1.1) contrast(1.05) brightness(.95);
}

.hspg-three-paths{
  margin-top:22px;
}
.hspg-path-card,
.hspg-brand-card{
  border-color:rgba(6,26,43,.11);
  background:linear-gradient(180deg,#ffffff 0%,#f8fcff 100%);
  box-shadow:var(--hspg-shadow-soft);
}
.hspg-path-card span,
.hspg-card-kicker{
  color:var(--hspg-green);
}

.hspg-motion-section--visual{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.92fr);
  gap:34px;
  align-items:center;
  background:
    radial-gradient(circle at 18% 16%,rgba(0,163,255,.16),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#eff8ff 100%);
  padding:clamp(30px,4vw,48px);
}
.hspg-motion-section--visual .hspg-steps{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.hspg-motion-section__visual{
  align-self:stretch;
}
.hspg-motion-section__visual img{
  min-height:100%;
  object-fit:cover;
}

.hspg-section--brands{
  padding-top:72px;
  padding-bottom:72px;
}
.hspg-brand-grid .hspg-brand-card:nth-child(1){border-top:5px solid var(--hspg-blue)}
.hspg-brand-grid .hspg-brand-card:nth-child(2){border-top:5px solid var(--hspg-green)}
.hspg-brand-grid .hspg-brand-card:nth-child(3){border-top:5px solid var(--hspg-gold)}

.hspg-split--visual{
  padding:clamp(30px,4vw,48px);
  border-radius:36px;
  background:linear-gradient(135deg,#ffffff 0%,#f2f9ff 100%);
  border:1px solid rgba(6,26,43,.10);
  box-shadow:var(--hspg-shadow-soft);
}

.hspg-page-hero--visual{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.86fr);
  gap:34px;
  align-items:center;
  width:min(1240px,calc(100% - 32px));
  margin:28px auto 36px;
  padding:clamp(34px,5vw,54px);
  border-radius:36px;
  background:
    radial-gradient(circle at 12% 14%,rgba(11,127,243,.14),transparent 32%),
    radial-gradient(circle at 86% 20%,rgba(25,185,120,.12),transparent 30%),
    linear-gradient(135deg,#fff 0%,#f3faff 100%);
  border:1px solid rgba(6,26,43,.10);
  box-shadow:var(--hspg-shadow-soft);
}
.hspg-page-hero--visual > div{
  max-width:none;
}
.hspg-page-hero--visual h1{
  font-size:clamp(2.7rem,5.7vw,5.4rem);
}
.hspg-page-hero__visual{
  max-width:520px;
  justify-self:end;
}
.hspg-visual-frame--inner img{
  max-height:360px;
  object-fit:cover;
}

.hspg-cta-band{
  background:linear-gradient(135deg,#061a2b 0%,#0b7ff3 100%) !important;
  box-shadow:0 24px 62px rgba(11,127,243,.20);
}
.hspg-cta-band .hspg-btn--light{
  background:linear-gradient(135deg,var(--hspg-green),#6bd841) !important;
  color:#061a2b !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(25,185,120,.26) !important;
}

@media (max-width:1080px){
  .hspg-hero--ecosystem,
  .hspg-motion-section--visual,
  .hspg-page-hero--visual{
    grid-template-columns:1fr;
  }
  .hspg-page-hero__visual{
    justify-self:stretch;
    max-width:none;
  }
  .hspg-motion-section--visual .hspg-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .hspg-hero--ecosystem,
  .hspg-motion-section--visual,
  .hspg-split--visual,
  .hspg-page-hero--visual{
    width:min(100% - 24px,1240px);
    padding:24px 20px;
    border-radius:24px;
  }
  .hspg-hero-points,
  .hspg-motion-section--visual .hspg-steps{
    grid-template-columns:1fr;
  }
  .hspg-visual-frame{
    border-radius:22px;
  }
  .hspg-visual-frame img{
    min-height:260px;
    object-fit:cover;
  }
}


/* =========================================================
   HSPG v1.2 Visual Scale + Transaction Engine Layout Fix
   - Reduces homepage graphic scale
   - Makes transaction steps span full-width bottom row
========================================================= */

.hspg-hero--ecosystem{
  grid-template-columns:minmax(0,1fr) minmax(300px,500px) !important;
  gap:clamp(24px,3.2vw,38px) !important;
  padding:clamp(30px,4.2vw,50px) !important;
}
.hspg-hero--ecosystem .hspg-hero__visual,
.hspg-hero--ecosystem .hspg-visual-frame{
  max-width:500px !important;
  width:100% !important;
  justify-self:center !important;
  align-self:center !important;
}
.hspg-hero--ecosystem .hspg-visual-frame img{
  width:100% !important;
  max-width:470px !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
}

.hspg-motion-section--visual{
  grid-template-columns:minmax(0,1fr) minmax(300px,470px) !important;
  align-items:center !important;
  gap:clamp(24px,3vw,34px) !important;
}
.hspg-motion-section--visual .hspg-motion-section__copy{
  align-self:center !important;
}
.hspg-motion-section--visual .hspg-motion-section__visual{
  max-width:470px !important;
  width:100% !important;
  justify-self:end !important;
  align-self:center !important;
}
.hspg-motion-section--visual .hspg-motion-section__visual img{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
}
.hspg-motion-section--visual .hspg-steps--wide{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  width:100% !important;
  margin-top:8px !important;
}
.hspg-motion-section--visual .hspg-steps--wide div{
  min-height:145px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

.hspg-split--visual{
  grid-template-columns:minmax(0,1fr) minmax(280px,440px) !important;
}
.hspg-split--visual .hspg-visual-frame,
.hspg-visual-frame--ecosystem-small{
  max-width:440px !important;
  width:100% !important;
  justify-self:center !important;
}
.hspg-split--visual .hspg-visual-frame img,
.hspg-visual-frame--ecosystem-small img{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
}

@media(max-width:1080px){
  .hspg-hero--ecosystem,
  .hspg-motion-section--visual,
  .hspg-split--visual{
    grid-template-columns:1fr !important;
  }
  .hspg-hero--ecosystem .hspg-visual-frame,
  .hspg-motion-section--visual .hspg-motion-section__visual,
  .hspg-split--visual .hspg-visual-frame{
    justify-self:center !important;
    max-width:560px !important;
  }
  .hspg-motion-section--visual .hspg-steps--wide{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:720px){
  .hspg-motion-section--visual .hspg-steps--wide{
    grid-template-columns:1fr !important;
  }
  .hspg-hero--ecosystem .hspg-visual-frame,
  .hspg-motion-section--visual .hspg-motion-section__visual,
  .hspg-split--visual .hspg-visual-frame{
    max-width:100% !important;
  }
}


/* =========================================================
   HSPG v1.3 Hero Image Fill Fix
   - Make homepage top-right hero image fill its container
   - Remove left/right white gutters inside the visual frame
========================================================= */
.hspg-hero--ecosystem .hspg-hero__visual{
  max-width:540px !important;
  width:100% !important;
  min-height:auto !important;
}
.hspg-hero--ecosystem .hspg-visual-frame{
  width:100% !important;
  max-width:540px !important;
  min-height:0 !important;
  padding:0 !important;
  border-radius:32px !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,248,255,.96)) !important;
}
.hspg-hero--ecosystem .hspg-visual-frame img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:320px !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.12) !important;
  transform-origin:center center !important;
}
@media(max-width:1080px){
  .hspg-hero--ecosystem .hspg-hero__visual,
  .hspg-hero--ecosystem .hspg-visual-frame{
    max-width:620px !important;
  }
  .hspg-hero--ecosystem .hspg-visual-frame img{
    min-height:300px !important;
    transform:scale(1.08) !important;
  }
}
@media(max-width:760px){
  .hspg-hero--ecosystem .hspg-visual-frame img{
    min-height:240px !important;
    transform:scale(1.06) !important;
  }
}


/* =========================================================
   HSPG v1.4 Brand Funnels Visual Update
   - Adds brand-funnels-specific hero graphic support
   - Makes the brand funnels hero image show fully and cleanly
========================================================= */
.hspg-page-hero--brands .hspg-page-hero__visual{
  max-width:640px !important;
}
.hspg-visual-frame--brands{
  max-width:640px !important;
  width:100% !important;
  padding:0 !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,255,.98)) !important;
}
.hspg-visual-frame--brands img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  filter:saturate(1.03) contrast(1.02) brightness(.98) !important;
}
@media(max-width:1080px){
  .hspg-page-hero--brands .hspg-page-hero__visual,
  .hspg-visual-frame--brands{
    max-width:720px !important;
  }
}


/* =========================================================
   HSPG v1.5 Brand Funnels Collage Update
   - Replaces abstract/right-side image beside the MLS routing section
   - Uses approved property collage graphic
========================================================= */
.hspg-image-card--collage{
  width:min(100%,560px);
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,255,.98)) !important;
}
.hspg-image-card--collage img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.03) contrast(1.02) brightness(.98);
}
@media(max-width:1080px){
  .hspg-image-card--collage{
    width:min(100%,640px);
  }
}