/* InboundOps globe hero, Signal system v1.0.
   Every class is prefixed io- so nothing collides with site.css. The section keeps class="hero" and the
   primary CTA keeps class="button" because site.js watches ".hero .button" for the sticky mobile CTA;
   the selectors below are written to win over site.css's .hero / .button rules. */

@font-face { font-family: "IO Archivo"; src: url("/assets/approved-io-archivo.8704c6f7f4e7.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "IO Mono"; src: url("/assets/approved-io-mono.a06ba569ec15.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root { --io-ink: #0C0E12; --io-graphite: #16191F; --io-line: #262A33; --io-bone: #F1EEE6; --io-slate: #8A93A3; --io-signal: #FF5A1F; --io-ease: cubic-bezier(.22, 1, .36, 1); }

/* ---- header: same markup as today, recolored ---- */
.site-header { background: var(--io-ink); border-bottom-color: var(--io-line); }
.site-header .brand img { width: 168px; height: auto; max-height: 36px; }
.site-header .nav a { color: var(--io-slate); }
.site-header .nav a:hover, .site-header .nav a[aria-current=page] { color: var(--io-bone); }
.site-header .nav a.button { background: var(--io-bone); color: var(--io-ink); border: 0; border-radius: 6px; font-weight: 700; }
.site-header .nav a.button:hover { background: #fff; transform: none; }
.site-header .menu-toggle { color: var(--io-bone); border-color: var(--io-line); }

/* ---- hero ---- */
.hero.io-hero { position: relative; background: var(--io-ink); color: var(--io-bone); padding: 0; min-height: clamp(640px, calc(100vh - 100px), 900px); display: flex; align-items: center; border-bottom: 1px solid var(--io-line); overflow: hidden; isolation: isolate; }
.io-hero .io-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.io-hero .io-globe { position: absolute; inset: 0; display: block; }
.io-hero .io-pins { position: absolute; inset: 0; }
.io-hero .io-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: 72px 96px; }
.io-hero .io-hero__copy { max-width: 640px; }

.io-hero .io-hero__title { font-family: "IO Archivo", "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: clamp(2.6rem, 4.3vw, 4.25rem); line-height: .99; letter-spacing: -0.035em; color: var(--io-bone); max-width: 17ch; margin: 0; text-wrap: balance; }
.io-hero .io-headline-opening { display: block; }
.io-hero .io-hero__sub { margin: 26px 0 0; max-width: 34rem; color: var(--io-slate); font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.55; }
.io-hero .io-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.io-hero .io-hero__title + .io-hero__ctas { margin-top: 42px; }
.io-hero .io-btn.button, .io-hero .io-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; min-width: 0; padding: 14px 24px; border-radius: 6px; border: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.3; text-decoration: none; background: var(--io-bone); color: var(--io-ink); transition: background-color 240ms var(--io-ease); }
.io-hero .io-btn.button:hover, .io-hero .io-btn:hover { background: #fff; transform: none; }
.io-hero .io-btn--ghost, .io-hero .io-btn--ghost.button { background: rgba(12,14,18,.6); color: var(--io-bone); box-shadow: inset 0 0 0 1.5px var(--io-line); }
.io-hero .io-btn--ghost:hover { background: var(--io-graphite); }

.io-hero .io-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--io-line); max-width: 34rem; font-family: "IO Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--io-slate); }
.io-hero .io-facts b { color: var(--io-bone); font-weight: 500; }

.io-hero .io-clock { position: absolute; right: var(--gutter, 4rem); bottom: 22px; margin: 0; max-width: none; font-family: "IO Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--io-slate); }
.io-hero .io-clock__time { color: var(--io-bone); }

/* ---- lead cards pinned to the globe ---- */
.io-pin-card { position: absolute; left: 0; top: 0; background: rgba(22,25,31,.94); border: 1px solid var(--io-line); border-radius: 10px; padding: 14px 16px; color: var(--io-bone); transition: opacity 240ms var(--io-ease), border-color 240ms var(--io-ease); will-change: transform; }
.io-pin-card.is-entering, .io-pin-card.is-leaving { opacity: 0; }
.io-pc__top { display: flex; align-items: center; gap: 8px; font-family: "IO Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--io-slate); white-space: nowrap; overflow: hidden; }
.io-pc__live { width: 8px; height: 8px; border-radius: 50%; background: var(--io-signal); flex: none; transition: background-color 240ms var(--io-ease); }
.io-pc__type { display: block; margin-top: 7px; font-family: "IO Archivo", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; }
.io-pc__biz { display: block; margin-top: 1px; font-size: 14px; color: var(--io-slate); }
.io-pc__foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--io-line); font-family: "IO Mono", ui-monospace, monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
.io-pc__status { color: var(--io-slate); }
.io-pc__timer { color: var(--io-signal); transition: color 240ms var(--io-ease); }
.io-pin-card.is-answered .io-pc__live { background: var(--io-slate); }
.io-pin-card.is-answered .io-pc__timer { color: var(--io-bone); }

.io-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- below 900px: copy first, globe as its own block underneath ---- */
@media (max-width: 899px) {
  .hero.io-hero { display: flex; flex-direction: column-reverse; min-height: 0; }
  .io-hero .io-stage { position: relative; inset: auto; height: 480px; width: 100%; }
  .io-hero .io-hero__inner { padding-block: 44px 8px; }
  .io-hero .io-hero__title { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
  .io-hero .io-clock { left: var(--gutter, 1.25rem); right: auto; bottom: 16px; font-size: 11px; }
}
@media (max-width: 760px) {
  .io-hero .io-hero__ctas { flex-direction: column; align-items: stretch; }
  .io-hero .io-stage { height: 440px; }
  .io-pin-card { padding: 12px 14px; }
  .io-pc__type { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .io-pin-card, .io-pc__live, .io-pc__timer { transition: none; } }