/* Humvance brand 2026-10 (D-2026-10-08-01, softened 2026-10-08 to "option 1": deep soft green, not black): mint accent.
   Loaded AFTER hv.css (and hv-site.css) on every client-facing page. It only
   re-points the existing design tokens, so every component that already reads
   var(--hv-*) follows. The tripled :root wins over hv.css's light default, its
   prefers-color-scheme block and its [data-theme] blocks. Print stays light. */

:root:root:root {
  --hv-paper:        #123129;   /* background */
  --hv-surface:      #1A3F35;   /* cards, panels */
  --hv-surface-2:    #163830;
  --hv-ink:          #F7F6F2;   /* headings */
  --hv-ink-2:        #E2E9E4;   /* body text */
  --hv-ink-3:        #A9BEB4;   /* muted text */
  --hv-line:         #2F5A4D;   /* dividers */
  --hv-line-2:       #41705F;

  --hv-signal:       #A6FFD9;   /* mint: interactive, emphasis */
  --hv-signal-ink:   #C9FFE8;
  --hv-signal-soft:  #1F4A3E;
  --hv-signal-line:  #2C5A4C;

  --hv-clay:         #E9B48C;   /* the warm lights in the hero, used sparingly */
  --hv-clay-soft:    #2A1D15;

  --hv-unverified:      #D7B463;  --hv-unverified-soft: #2B2412;  --hv-unverified-line: #4D411F;
  --hv-verified:        #6FBF95;  --hv-verified-soft:   #12281D;  --hv-verified-line:   #24462F;
  --hv-conflict:        #E08A7E;  --hv-conflict-soft:   #2C1815;  --hv-conflict-line:   #4D2A25;

  --hv-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --hv-shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.7);

  --hv-mint-text: #08110F;      /* text on a mint button */
  color-scheme: dark;
}

body { background: var(--hv-paper); color: var(--hv-ink-2); }
::selection { background: #2C5A4C; color: #F7F6F2; }
a { color: var(--hv-signal); }

/* Buttons: the primary action is a mint pill with dark text. */
.hv-btn-primary, .hv-btn-signal, .h2-btn-p { background: var(--hv-signal); color: var(--hv-mint-text) !important; border-color: var(--hv-signal); }
.hv-btn-primary:hover, .hv-btn-signal:hover, .h2-btn-p:hover { background: var(--hv-signal-ink); color: var(--hv-mint-text) !important; }
.hv-header .hv-btn-primary:hover { background: var(--hv-signal-ink); }
.h2-btn-g { color: var(--hv-ink); border: 1px solid var(--hv-line-2); }
.h2-btn-g:hover { background: var(--hv-surface); color: var(--hv-ink); border-color: var(--hv-signal); }

/* Bands that used "ink" as a background would turn white on the dark ground. */
.h2-band { background: var(--hv-surface); color: var(--hv-ink-2); }
.h2-band .h2-h2, .h2-band .h2-kicker b { color: var(--hv-ink); }
.h2-band .h2-kicker, .h2-band .h2-head p { color: var(--hv-ink-3); }
.h2-callout { background: var(--hv-surface); }
.h2-callout .h2-h2 { color: var(--hv-ink); }

/* Header: dark glass. */
.hv-header { background: color-mix(in srgb, var(--hv-paper) 86%, transparent); border-bottom-color: var(--hv-line); }

/* The new logo: the wordmark file, with the mark inside it. */
.hv-logo-img { display: block; height: 26px; width: auto; }
.hv-footer .hv-logo-img { height: 24px; }

/* Numbers in the new copy are Latin; keep them that way in Arabic text. */
.hv-num, bdi.hv-num { font-variant-numeric: lining-nums; }

/* Home v4 hero (D-2026-10-08-02), from the approved design. */
.hb-hero { position: relative; overflow: hidden; background: var(--hv-paper); min-height: clamp(560px, 78vh, 820px); display: flex; align-items: center; }
.hb-hero picture, .hb-hero img.hb-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-hero img.hb-bg { object-fit: cover; object-position: left center; }
.hb-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(18,49,41,.92) 0%, rgba(18,49,41,.78) 38%, rgba(18,49,41,0) 64%); }
body[data-lang="en"] .hb-hero img.hb-bg { transform: scaleX(-1); }
body[data-lang="en"] .hb-hero::after { background: linear-gradient(to right, rgba(18,49,41,.92) 0%, rgba(18,49,41,.78) 38%, rgba(18,49,41,0) 64%); }
.hb-in { position: relative; z-index: 1; width: 100%; max-width: var(--hv-maxw); margin-inline: auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 40px); display: grid; }
.hb-copy { max-width: 620px; display: grid; gap: 22px; }
.hb-tag { display: flex; align-items: center; gap: 14px; color: var(--hv-ink-3); font-size: .95rem; }
.hb-tag::after { content: ""; width: 72px; height: 1px; background: var(--hv-line-2); }
.hb-h1 { margin: 0; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.22; font-weight: 700; color: var(--hv-ink); }
.hb-h1 span { display: block; }
.hb-h1 span + span { color: var(--hv-signal); }
body[data-lang="en"] .hb-h1 { letter-spacing: -.02em; line-height: 1.1; font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
.hb-sub { margin: 0; font-size: clamp(1.05rem, .98rem + .45vw, 1.3rem); line-height: 1.85; color: var(--hv-ink-2); max-width: 46ch; }
.hb-bar { display: grid; gap: 18px; padding-top: 22px; border-top: 1px solid var(--hv-line); }
.hb-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hb-metas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hb-metas .hb-meta + .hb-meta { padding-inline-start: 18px; border-inline-start: 1px solid var(--hv-line); }
.hb-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--hv-ink-2); font-size: .98rem; }
.hb-meta img { width: 22px; height: 22px; filter: invert(1) brightness(.86); }
.hb-sep { width: 1px; height: 28px; background: var(--hv-line); }
.hb-ex { position: absolute; z-index: 1; inset-inline-end: clamp(16px, 4vw, 48px); bottom: clamp(20px, 4vw, 44px); max-width: 300px;
  border-inline-start: 1px solid var(--hv-line-2); padding-inline-start: 14px; display: grid; gap: 4px; }
.hb-ex b { color: var(--hv-ink); font-size: 1.05rem; }
.hb-ex p { margin: 0; color: var(--hv-ink-2); font-size: .92rem; line-height: 1.7; }
.hb-ex small { color: var(--hv-ink-3); font-size: .75rem; }
@media (max-width: 900px) {
  .hb-hero { display: block; min-height: 0; }
  .hb-hero picture, .hb-hero img.hb-bg { position: relative; inset: auto; height: auto; aspect-ratio: 1080 / 1350; max-height: 62vh; }
  .hb-hero img.hb-bg { object-position: center top; }
  body[data-lang="en"] .hb-hero img.hb-bg { transform: none; }
  .hb-hero::after, body[data-lang="en"] .hb-hero::after { background: linear-gradient(to bottom, rgba(18,49,41,0) 30%, rgba(18,49,41,1) 62%); height: 62vh; }
  .hb-in { margin-top: -27vh; padding-top: 0; }
  .hb-ctas .h2-btn { flex: 1 1 100%; }
  .hb-ex { position: static; margin: 0 clamp(16px, 4vw, 40px) 28px; }
  .hb-sep { display: none; }
}

/* Home cards (h3-*) on the dark ground. */
.h3-card { background: var(--hv-surface) !important; border-color: var(--hv-line) !important; border-radius: 20px !important; }
.h3-card p { color: var(--hv-ink-2) !important; }
.h3-tag, .h3-fix { color: var(--hv-signal) !important; }
.h3-dark { background: #0E2A22 !important; border-color: var(--hv-signal-line) !important; color: var(--hv-ink) !important; }
.h3-dark p { color: var(--hv-ink-2) !important; }

/* Print: reports and anything else printed go back to black on white. */
@media print {
  :root:root:root {
    --hv-paper: #FFFFFF; --hv-surface: #FFFFFF; --hv-surface-2: #FAFAFA;
    --hv-ink: #0A0A0A; --hv-ink-2: #2E2E2C; --hv-ink-3: #5E5D59;
    --hv-line: #DDDCD6; --hv-line-2: #C8C6BE;
    --hv-signal: #0E6B4F; --hv-signal-ink: #0A5540; --hv-signal-soft: #E6F2EC; --hv-signal-line: #B6D8C8;
    color-scheme: light;
  }
  body { background: #fff !important; color: #0A0A0A !important; }
}