/* Connect by JBRH — Production Scroll-Scrub Hero Stylesheet
   Luxury warm champagne in day, deep graphite/obsidian in dark.
   Frame-by-frame 16:9 native video composition with synchronized semantic HTML copy.
   Zero horizontal overflow across all tested screen sizes (360px to 1920px).
*/

/* ---------- Root Hero Section ---------- */
.connect-site .lp-hero {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  padding-top: clamp(0.5rem, 1.2vw, 1rem) !important;
  padding-bottom: clamp(1rem, 2vw, 1.75rem) !important;
  scroll-margin-top: 72px;
}

/* Eliminate competing decorative layers from other legacy css */
.connect-site .lp-hero::before,
.connect-site .lp-hero::after {
  display: none !important;
  content: none !important;
}

/* Suppress floating Talk to Cira assistant while hero story is active */
body.is-hero-active #cira-launcher,
body.is-hero-active #cira-teaser,
body.is-hero-active .cira-launcher,
body.is-hero-active .cira-teaser {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(24px) !important;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease !important;
}

/* Accessible screen-reader helper */
.connect-site .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-story-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 clamp(0.75rem, 2.5vw, 1.75rem);
}
/* ==================================================
   MASTER VISUAL STORY STAGE (The Pinned Canvas)
   ================================================== */
.hero-visual-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95) 0%, rgba(250, 246, 238, 0.78) 55%, rgba(243, 237, 225, 0.55) 100%),
    var(--surface, #FFFDF8);
  border: 1px solid rgba(170, 104, 43, 0.16);
  box-shadow:
    0 24px 72px rgba(52, 39, 24, 0.08),
    0 4px 16px rgba(52, 39, 24, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

html[data-theme="dark"] .hero-visual-stage {
  background:
    radial-gradient(circle at 50% 45%, rgba(26, 34, 38, 0.92) 0%, rgba(18, 24, 28, 0.96) 65%, rgba(10, 14, 16, 0.98) 100%),
    var(--surface, #171F24);
  border-color: rgba(245, 219, 184, 0.14);
  box-shadow:
    0 28px 84px rgba(0, 0, 0, 0.52),
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 16:9 Video Viewport */
.hero-video-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(calc(100vh - 120px), 640px);
  margin: 0 auto;
  overflow: hidden;
  background: #F4EFEA;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-theme="dark"] .hero-video-viewport {
  background: #12181C;
}

/* Fallback poster image */
.hero-video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transform-origin: 0% 0%;
  z-index: 1;
  pointer-events: none;
  transition: opacity 300ms ease;
  display: block;
}

.hero-video-fallback.is-ready {
  opacity: 0;
  pointer-events: none;
}

/* Native HTML5 Video Element */
.hero-video-element {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transform-origin: 0% 0%;
  display: block;
  z-index: 2;
  background: transparent;
  outline: none;
}

.hero-video-element::-webkit-media-controls {
  display: none !important;
}

/* ==================================================
   SEMANTIC ACTIVE TASK HUD
   ================================================== */
.hero-task-hud {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1.25rem 1rem;
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line, rgba(78, 62, 43, 0.15));
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 5;
  transition: background 250ms ease, border-color 250ms ease;
}

html[data-theme="dark"] .hero-task-hud {
  background: rgba(20, 27, 31, 0.90);
  border-top-color: var(--line, rgba(245, 219, 184, 0.12));
}

.hero-task-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.hero-task-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /*  --accent is the display copper; --accent-text is the same family at the
      weight text is allowed to be read at. On --accent-soft the display copper
      measures 3.09:1 (axe, 320 and 390, on `01 / 09`); the ink measures 4.98. */
  color: var(--accent-text, #8D551E);
  background: var(--accent-soft, #F6E6D2);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

html[data-theme="dark"] .hero-task-badge {
  color: var(--accent-2, #F0BF80);
  background: rgba(217, 146, 78, 0.18);
}

.hero-task-badge .task-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green, #1A7E70);
  box-shadow: 0 0 0 2px rgba(26, 126, 112, 0.25);
}

.hero-task-kicker {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6B6862);
}

.hero-task-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero-task-heading {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #171B1E) !important;
  margin: 0 !important;
  transition: color 200ms ease;
}

.hero-task-desc {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem) !important;
  line-height: 1.42 !important;
  color: var(--muted, #6B6862) !important;
  margin: 0 !important;
  max-width: 78ch;
}

/* Minimal Progress Track */
.hero-task-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(78, 62, 43, 0.10);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.35rem;
}

html[data-theme="dark"] .hero-task-progress-track {
  background: rgba(245, 219, 184, 0.10);
}

.hero-task-progress-fill {
  height: 100%;
  width: 4%;
  background: linear-gradient(90deg, var(--accent, #B9732D) 0%, var(--green, #1A7E70) 100%);
  border-radius: 999px;
  transition: width 80ms linear;
}
/* ==================================================
   TABLET RESPONSIVE (768px - 1023px)
   ================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-story-container {
    padding: 0 1.25rem;
    gap: 0.85rem;
  }

  .hero-video-viewport {
    max-height: 480px;
  }

  .hero-task-hud {
    padding: 0.75rem 1rem 0.85rem;
  }
}

/* ==================================================
   MOBILE RESPONSIVE (<= 767px)
   - Preserve 16:9 complete composition with minimal padding
   - Video appears immediately below mobile header
   - Single concise active task label
   - Minimal progress line and step counter (e.g. 05 / 09)
   - Zero horizontal overflow
   ================================================== */
@media (max-width: 767px) {
  .connect-site .lp-hero {
    padding-top: 0.35rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .hero-story-container {
    padding: 0 !important;
    gap: 0;
    max-width: 100%;
    width: 100%;
  }

  .hero-visual-stage {
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
  }

  .hero-video-viewport {
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - var(--header, 64px) - 2rem);
    height: auto;
    width: 100%;
  }

  .hero-video-element,
  .hero-video-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.12) !important;
    transform-origin: 0% 0% !important;
  }

  .hero-task-hud {
    padding: 0.65rem 0.85rem 0.75rem;
    gap: 0.35rem;
  }

  .hero-task-heading {
    font-size: 1.05rem !important;
  }

  .hero-task-desc {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }
}

/* ==================================================
   REDUCED MOTION (prefers-reduced-motion: reduce)
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  .connect-site .lp-hero {
    min-height: auto !important;
  }

  .hero-visual-stage {
    min-height: auto !important;
  }

  .hero-video-element {
    display: none !important;
  }

  .hero-video-fallback {
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
  }
}

/* ==================================================
   CONNECT_HERO_PIN_RESERVE_V1 — 2026-09-16
   The scroll travel, reserved before the script that creates it.

   ScrollTrigger pins the stage with `pinSpacing`, which inserts the whole
   travel into the document about 800ms after first paint — after gsap,
   ScrollTrigger and connect-hero-story.js have each been fetched. Everything
   below the hero dropped by that travel: measured cumulative layout shift of
   1.00 at 1440x900 and 1.50 at 390x844, on the one page every visitor sees
   first. Nothing was broken; the page simply jumped a screen and a half while
   somebody was reading it.

   The same travel is reserved here, from the first paint (theme.js adds this
   stylesheet while the document is still parsing, so it is render-blocking),
   and connect-hero-story.js sets --hero-pin-reserve to 0 in the frame it
   creates the pin — and on every path where it creates none: no GSAP, reduced
   motion, or no hero video. The three numbers are createPin()'s arguments and
   move with them.
   ================================================== */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .connect-site .lp-hero {
    --hero-pin-reserve: 2200px;
    padding-bottom: calc(0.75rem + var(--hero-pin-reserve)) !important;
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) and (max-width: 1023px) {
  .connect-site .lp-hero {
    --hero-pin-reserve: 2600px;
    padding-bottom: calc(clamp(1rem, 2vw, 1.75rem) + var(--hero-pin-reserve)) !important;
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .connect-site .lp-hero {
    --hero-pin-reserve: 3200px;
    padding-bottom: calc(clamp(1rem, 2vw, 1.75rem) + var(--hero-pin-reserve)) !important;
  }
}

/* ==================================================
   CONNECT_BUYER_FIRST_SCREEN_V1 — the hero intro
   The outcome, the problem, what is live and one low-risk next step, read
   before the mascot story. It sits above the pinned stage and scrolls away
   before the pin starts, so the pin's start and travel are unchanged. Colour
   comes only from the landing tokens, so day and dark themes both apply.
   ================================================== */
.connect-site .lp-hero .hero-intro {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto clamp(0.9rem, 2vw, 1.4rem);
  padding: clamp(0.5rem, 1.6vw, 1.1rem) clamp(0.75rem, 2.5vw, 1.75rem) 0;
  box-sizing: border-box;
}
.connect-site .lp-hero .hero-intro-title {
  margin: 0;
  max-width: none;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: var(--ink);
}
.connect-site .lp-hero .hero-intro-kicker {
  display: block;
  margin: 0 0 0.55rem;
  font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, sans-serif;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--accent-text, var(--accent));
}
.connect-site .lp-hero .hero-intro-headline {
  display: block;
  max-width: 21ch;
  font-size: clamp(1.9rem, 1.05rem + 2.9vw, 3.4rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.connect-site .lp-hero .hero-intro-lede {
  margin: 0.9rem 0 0;
  max-width: 64ch;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--muted);
}
.connect-site .lp-hero .hero-intro-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.connect-site .lp-hero .hero-intro-status li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}
.connect-site .lp-hero .hero-intro-status b {
  font-weight: 650;
  color: var(--ink);
}
.connect-site .lp-hero .hero-intro-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin: 0.85rem 0 0;
}
.connect-site .lp-hero .hero-intro-next a {
  display: inline-block;
  padding-block: 0.7rem;
  line-height: 1.4;
  font-size: 0.975rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong, currentColor);
  text-underline-offset: 4px;
}
.connect-site .lp-hero .hero-intro-next a.hero-intro-step {
  color: var(--accent-text, var(--accent));
  text-decoration-color: currentColor;
}
.connect-site .lp-hero .hero-intro-next a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .connect-site .lp-hero .hero-intro-status li {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
  }
  .connect-site .lp-hero .hero-intro-next a.hero-intro-step {
    flex-basis: 100%;
    padding-block: 0.55rem;
  }
}