/* ─────────────────────────────────────────────────────────────────────
   SUSBIO Hero — Glass HUD Stylesheet v1.1.0
   Desktop: absolute-position layout (unchanged, proven correct).
   Mobile ≤768px: flex-column layout matching approved preview.
   All rules scoped to .sh-hero.
───────────────────────────────────────────────────────────────────── */

/* ─── Tokens ─── */
.sh-hero {
  --sh-bg:           #F4F6F8;
  --sh-ink:          #0B0F14;
  --sh-ink2:         #4A535B;
  --sh-muted:        #6B7480;
  --sh-accent:       #2A6FBF;
  --sh-accent2:      #0B3A6C;
  --sh-green:        #28A35F;
  --sh-glass-bg:     rgba(255,255,255,0.62);
  --sh-glass-border: rgba(255,255,255,0.78);
  --sh-font-body:    'Geist', 'Inter', system-ui, sans-serif;
  --sh-font-serif:   'Instrument Serif', Georgia, serif;
  --sh-h1-size:      88px;
  --sh-h1-weight:    500;
  --sh-sub-size:     18px;
  --sh-orb1-color1:  rgba(180,235,255,0.95);
  --sh-orb1-color2:  rgba(60,130,200,0.32);
  --sh-orb2-color:   rgba(190,230,210,0.55);

  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--sh-bg);
  color: var(--sh-ink);
  font-family: var(--sh-font-body);
  letter-spacing: -0.01em;
  overflow: hidden;
}
.sh-hero *, .sh-hero *::before, .sh-hero *::after { box-sizing: border-box; }

/* ─── Ambient orbs ─── */
.sh-orb {
  position: absolute; right: -260px; top: -280px;
  width: 1100px; height: 1100px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    var(--sh-orb1-color1),
    rgba(120,200,240,0.7) 30%,
    var(--sh-orb1-color2) 55%,
    rgba(20,60,120,0) 75%);
  filter: blur(2px); z-index: 1; pointer-events: none;
}
.sh-orb-2 {
  position: absolute; left: -300px; bottom: -340px;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--sh-orb2-color),
    rgba(150,210,200,0.2) 40%,
    rgba(0,0,0,0) 70%);
  filter: blur(8px); z-index: 1; pointer-events: none;
}
.sh-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(20,30,40,0.04) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: multiply;
  pointer-events: none; z-index: 2;
}

/* ─── Brand watermarks (desktop) ─── */
.sh-mark {
  position: absolute; top: 40px; left: 56px; z-index: 6;
  font-size: 11px; letter-spacing: 0.32em;
  color: rgba(11,15,20,0.55); font-weight: 500;
  display: flex; align-items: center;
}
.sh-mark::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sh-accent); margin-right: 10px;
  box-shadow: 0 0 8px rgba(42,111,191,0.6);
}
.sh-mark-r {
  position: absolute; top: 40px; right: 56px; z-index: 6;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(11,15,20,0.45);
}

/* ─── Mobile status bar — hidden on desktop ─── */
.sh-m-status { display: none; }
.sh-topbar   { display: none; }

/* ─── Glass base ─── */
.sh-glass, .sh-float, .sh-float-m {
  background: var(--sh-glass-bg);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--sh-glass-border);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
              0 24px 60px -20px rgba(20,40,70,0.30),
              0 6px 16px -8px rgba(20,40,70,0.15);
}

/* ─── Eyebrow chip ─── */
.sh-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(11,15,20,0.07);
  backdrop-filter: blur(10px);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #2F3942; font-weight: 500; width: fit-content;
}

/* ─── Green dot ─── */
.sh-dot-green {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sh-green); box-shadow: 0 0 8px var(--sh-green);
  flex-shrink: 0; animation: sh-pulse 2.4s ease-in-out infinite;
}
@keyframes sh-pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.5; transform:scale(1.3); }
}

/* ─── Headline ─── */
.sh-h1 {
  font-size: var(--sh-h1-size); line-height: 0.96;
  font-weight: var(--sh-h1-weight); letter-spacing: -0.045em;
  margin: 28px 0 0; color: var(--sh-ink); max-width: 760px; text-wrap: balance;
}
.sh-h1 em {
  font-style: italic; font-family: var(--sh-font-serif);
  font-weight: 400; letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--sh-accent) 0%, var(--sh-accent2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; padding-right: 0.06em;
}

/* ─── Sub copy ─── */
.sh-sub {
  margin: 28px 0 0; max-width: 540px;
  font-size: var(--sh-sub-size); line-height: 1.55; color: var(--sh-ink2);
}

/* ─── CTAs ─── */
.sh-ctas { margin: 40px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sh-cta-p {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 22px; border-radius: 999px;
  background: var(--sh-ink); color: #fff;
  font-size: 15px; font-weight: 500; font-family: inherit;
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(11,15,20,0.35);
  transition: transform .2s, box-shadow .2s;
}
.sh-cta-p:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -8px rgba(11,15,20,0.5); color: #fff; }
.sh-cta-s {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 22px; border-radius: 999px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(11,15,20,0.08);
  color: var(--sh-ink); font-size: 15px; font-family: inherit;
  cursor: pointer; text-decoration: none; backdrop-filter: blur(8px); transition: background .2s;
}
.sh-cta-s:hover { background: rgba(255,255,255,0.9); color: var(--sh-ink); }

/* ─── Pager ─── */
.sh-pager-wrap {
  margin-top: 28px; display: flex; justify-content: space-between;
  align-items: center; max-width: 760px;
}
.sh-pager { display: flex; align-items: center; gap: 14px; }
.sh-pager-num {
  font-family: var(--sh-font-serif); font-size: 22px;
  color: var(--sh-ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; display: flex; align-items: center;
}
.sh-pager-sep { color: rgba(11,15,20,0.3); margin: 0 4px; }
.sh-pager-tot { color: rgba(11,15,20,0.4); font-size: 16px; }
.sh-dots { display: flex; gap: 6px; margin-left: 8px; }
.sh-dot {
  width: 24px; height: 3px; border-radius: 2px;
  background: rgba(11,15,20,0.12);
  cursor: pointer; transition: background .3s, width .3s; border: none; padding: 0;
}
.sh-dot-on, .sh-dot.sh-dot-on { background: var(--sh-ink); width: 44px; }
.sh-arrows { display: flex; gap: 8px; }
.sh-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(11,15,20,0.08);
  color: var(--sh-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); transition: background .2s;
}
.sh-arrow:hover { background: rgba(255,255,255,0.95); }

/* ─── Desktop slide stage ─── */
.sh-stage {
  position: absolute; top: 110px; left: 56px;
  width: 760px; z-index: 5;
}
.sh-slide { display: none; }
.sh-slide-active { display: block; animation: sh-fade-in .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sh-fade-in {
  from { opacity:0; transform:translateY(8px); filter:blur(4px); }
  to   { opacity:1; transform:translateY(0);   filter:blur(0); }
}

/* ─── Desktop floaters ─── */
.sh-float {
  position: absolute; padding: 16px 18px; z-index: 8;
  animation: sh-bob 7s ease-in-out infinite; width: 240px;
}
@keyframes sh-bob {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}
.sh-fl-1 { width: 240px; animation-delay: 0s; }
.sh-fl-2 { width: 220px; animation-delay: 1.1s; }
.sh-fl-3 { width: 270px; animation-delay: 2.2s; padding: 14px 18px; }
.sh-fl-4 { width: 270px; animation-delay: 3.3s; }

.sh-fl-label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sh-muted); display: flex; align-items: center; gap: 8px;
}
.sh-fl-value {
  font-size: 34px; font-weight: 500; letter-spacing: -0.03em;
  color: var(--sh-ink); margin-top: 4px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.sh-fl-value sup { font-size: 13px; color: var(--sh-muted); font-weight: 400; margin-left: 4px; vertical-align: super; }
.sh-fl-meta { margin-top: 6px; font-size: 11px; color: var(--sh-ink2); display: flex; align-items: center; gap: 6px; }
.sh-fl-up { color: var(--sh-green); font-weight: 600; }
.sh-fl-dn { color: #E05A2B; font-weight: 600; }

/* Mobile pair + spacer — hidden on desktop */
.sh-m-pair  { display: none; }
.sh-spacer  { display: none; }

/* ─── Desktop trust strip ─── */
.sh-trust {
  position: absolute; left: 56px; right: 56px; bottom: 72px;
  display: flex; gap: 48px; z-index: 5;
  padding-top: 28px; border-top: 1px solid rgba(11,15,20,0.08);
}
.sh-tc { display: flex; flex-direction: column; gap: 6px; }
.sh-tv { font-size: 28px; font-weight: 500; letter-spacing: -0.025em; color: var(--sh-ink); line-height: 1; }
.sh-tv em { font-style: italic; font-family: var(--sh-font-serif); font-weight: 400; color: var(--sh-accent); }
.sh-tl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sh-muted); }

/* ─── Desktop logo marquee ─── */
.sh-logos {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 56px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sh-muted);
  border-top: 1px solid rgba(11,15,20,0.06);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(10px);
  z-index: 6; overflow: hidden; height: 56px;
}
.sh-logos-label   { white-space: nowrap; flex-shrink: 0; }
.sh-logos-contact { white-space: nowrap; flex-shrink: 0; font-size: 10px; }
.sh-logos-track {
  flex: 1; overflow: hidden; margin: 0 24px; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sh-logos-row {
  display: inline-flex; gap: 36px; align-items: center;
  animation: sh-marquee 36s linear infinite; white-space: nowrap;
}
@keyframes sh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sh-logo {
  font-family: var(--sh-font-serif); font-style: italic;
  font-size: 18px; color: var(--sh-ink2); letter-spacing: 0; text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   TABLET — 900px–1100px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sh-stage  { width: 580px; left: 40px; top: 96px; }
  .sh-mark   { left: 40px; }
  .sh-mark-r { right: 40px; }
  .sh-trust  { left: 40px; right: 40px; gap: 32px; }
  .sh-logos  { padding: 18px 40px; }
  .sh-h1     { font-size: clamp(52px, 5.5vw, var(--sh-h1-size)); }
  .sh-float  { display: none; }
  .sh-fl-1   { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ≤ 768px
   Complete flex-column rebuild — approved in preview v2.
   Desktop rules above are NOT overridden except where explicitly set.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero becomes full-viewport flex column */
  .sh-hero {
    min-height: 100svh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 30%;     /* clears WP header + hamburger */
    overflow: hidden;
  }

  /* Orbs resized for mobile */
  .sh-orb   { right:-360px; top:-340px; width:720px; height:720px; }
  .sh-orb-2 { left:-260px; bottom:-240px; width:480px; height:480px; }

  /* ── Hide desktop-only elements ── */
  .sh-mark   { display: none; }
  .sh-mark-r { display: none; }
  .sh-float  { display: none !important; }
  .sh-trust  { display: none; }
  .sh-logos-label   { display: none; }
  .sh-logos-contact { display: none; }

  /* ── ROW 1: Topbar (mobile watermarks) ── */
  .sh-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 22px; flex-shrink: 0; position: relative; z-index: 6;
    margin-bottom: 10px;
  }
  .sh-topbar .sh-mark-m {
    font-size: 9px; letter-spacing: 0.24em;
    color: rgba(11,15,20,0.55); font-weight: 500;
    display: flex; align-items: center; gap: 7px;
  }
  .sh-topbar .sh-mark-m::before {
    content: ''; display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sh-accent); box-shadow: 0 0 7px rgba(42,111,191,0.6);
    flex-shrink: 0;
  }
  .sh-topbar .sh-mark-mr {
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(11,15,20,0.42);
  }

  /* ── ROW 2: Live status pill ── */
  .sh-m-status {
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0; position: relative; z-index: 7;
    margin: 0 22px 0;
    padding: 10px 16px; border-radius: 14px;
  }
  .sh-ms-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .sh-ms-item.live { flex-direction: row; gap: 6px; }
  .sh-ms-lbl  { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sh-muted); }
  .sh-ms-val  { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
  .sh-ms-val sup { font-size: 9px; color: var(--sh-muted); font-weight: 400; margin-left: 2px; }
  .sh-ms-sep  { width: 1px; height: 26px; background: rgba(11,15,20,0.08); flex-shrink: 0; }

  /* ── ROW 3: Slide stage — grows to fill available space ── */
  .sh-stage {
    position: relative; top: auto; left: auto; right: auto; width: auto;
    flex: 1; min-height: 0; z-index: 5;
    padding: 16px 22px 0;
    display: flex; flex-direction: column;
  }
  .sh-slide {
    display: none; flex-direction: column; height: 100%;
  }
  .sh-slide-active {
    display: flex;
    animation: sh-fade-in .5s ease both;
  }
  @keyframes sh-fade-in {
    from { opacity:0; transform:translateY(6px); filter:blur(3px); }
    to   { opacity:1; transform:translateY(0);   filter:blur(0); }
  }

  .sh-eyebrow { font-size: 9px; padding: 5px 12px 5px 8px; letter-spacing: 0.16em; flex-shrink: 0; }
  .sh-h1 { font-size: 44px; line-height: 0.96; letter-spacing: -0.04em; margin-top: 14px; max-width: none; flex-shrink: 0; }
  .sh-sub { font-size: 13.5px; line-height: 1.5; margin-top: 14px; max-width: none; flex-shrink: 0; }
  .sh-ctas { margin-top: 18px; gap: 8px; flex-shrink: 0; }
  .sh-cta-p, .sh-cta-s { padding: 12px 18px; font-size: 13px; }

  /* Pager sits at bottom of slide, in-flow */
  .sh-pager-wrap {
    margin-top: 16px; max-width: none; flex-shrink: 0;
    display: flex; justify-content: space-between; align-items: center;
  }
  .sh-pager-num { font-size: 16px; }
  .sh-pager-tot { font-size: 12px; }
  .sh-dot       { width: 18px; height: 2px; }
  .sh-dot-on, .sh-dot.sh-dot-on { width: 32px; }
  .sh-arrows    { display: none; }

  /* Small spacer between pager and floaters */
  .sh-spacer { display: block; flex: 0; height: 14px; flex-shrink: 0; }

  /* ── ROW 4: Floater pair ── */
  .sh-m-pair {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; flex-shrink: 0;
    padding: 0 22px; margin-bottom: 10px;
    position: relative; z-index: 6;
  }
  .sh-float-m {
    display: flex !important; flex-direction: column;
    padding: 12px 14px; border-radius: 14px;
    animation: none !important;
    position: relative !important; top: auto !important; right: auto !important;
    width: auto !important;
  }
  .sh-float-m .sh-fl-value { font-size: 22px; }
  .sh-float-m .sh-fl-label { font-size: 9.5px; letter-spacing: 0.13em; }
  .sh-float-m .sh-fl-meta  { font-size: 10.5px; }

  /* ── ROW 5: Logo marquee ── */
  .sh-logos {
    position: relative; left: auto; right: auto; bottom: auto;
    flex-shrink: 0; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; letter-spacing: 0.18em;
  }
  .sh-logos-track { margin: 0; flex: 1; overflow: hidden; }
  .sh-logo { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE ≤ 390px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  .sh-h1 { font-size: 38px; }
  .sh-hero { padding-top: 28%; }
}