@import url('v4.css');

/* =====================================================================
   v6 — Signature Leadgen brand on the dark structure.
   Tokens from SignatureLeadgen-Brand/source/master/brand-tokens.json:
   Midnight Navy #0B1F3B · Growth Blue #2563EB · Opportunity Blue #60A5FA
   Trusted Neutral #CBD5E1 · Clean Background #F8FAFC · Slate #64748B · Poppins
   ===================================================================== */

:root {
  --font-body: 'Poppins', -apple-system, sans-serif;
  --font-display: 'Poppins', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --navy: #0B1F3B; --navy-2: #122A4D; --navy-3: #1A365D;
  --blue: #2563EB; --blue-dark: #1D4ED8; --sky: #60A5FA;
  --neutral: #CBD5E1; --clean: #F8FAFC; --slate: #64748B; --slate-on-dark: #A7B4C7;

  --bg: var(--navy);
  --surface: var(--navy-2);
  --surface-2: var(--navy-3);
  --line: rgba(255,255,255,0.12);
  --ink: var(--clean);
  --ink-soft: var(--slate-on-dark);
  --card: var(--surface);
  --sand: var(--surface-2);

  --accent: var(--blue);
  --accent-dark: var(--blue-dark);

  --coral: var(--blue); --coral-ink: var(--sky); --coral-bg: rgba(37,99,235,0.18);
  --cta: var(--blue); --cta-dark: var(--blue-dark);
  --highlight-bg: var(--sky); --highlight-ink: var(--navy);
  --amber: var(--sky); --amber-ink: var(--sky); --amber-bg: rgba(96,165,250,0.16);
  --green: var(--blue); --green-ink: var(--blue-dark); --green-bg: rgba(37,99,235,0.12);

  --dark: #081729; --dark-card: var(--navy-2); --dark-line: rgba(255,255,255,0.12); --dark-soft: var(--slate-on-dark);
  --paper: var(--clean);
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-body); }
body::before { opacity: 0.05; mix-blend-mode: screen; }

/* Type: Poppins 700 for headlines, tight tracking per the wordmark spec */
.h1, .ttl, .card__title, .dcard h3, .shot figcaption strong, .story .ttl { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.h1 { line-height: 1.08; }
.ttl { line-height: 1.15; }
.number__val { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.win__url { font-family: var(--font-mono); }
.dcard .num, .lbl .num { font-family: var(--font-display); }

/* ---------- Nav ---------- */
.nav { background: rgba(11,31,59,0.84); border-bottom-color: var(--line); }
.nav__logo img { height: 30px; filter: none; }
.nav__logo .nav__logo-mark { display: none; }
@media (max-width: 640px) {
  .nav__logo .nav__logo-full { display: none; }
  .nav__logo .nav__logo-mark { display: block; height: 32px; }
}
.nav__links a { color: var(--slate-on-dark); }
.nav__links a:hover { color: var(--ink); }
.btn--nav { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,0.24); }
.btn--nav:hover { background: rgba(255,255,255,0.08); }
.btn--primary { color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,.40); }
.btn--primary:hover { box-shadow: 0 14px 34px rgba(37,99,235,.50); }
@keyframes cta-breathe { 0%,100% { box-shadow: 0 4px 16px rgba(37,99,235,.40); } 50% { box-shadow: 0 4px 26px rgba(96,165,250,.60); } }

/* ---------- Hero on navy ---------- */
.hero { padding-bottom: 72px; }
.schematic { color: var(--sky); opacity: 0.14; }
.hero::before { background: radial-gradient(ellipse at center, rgba(37,99,235,0.28), transparent 66%); }
.hero::after  { background: radial-gradient(ellipse at center, rgba(96,165,250,0.12), transparent 66%); }
.h1 { color: var(--ink); }
.h1 .highlight { color: var(--navy); }
.h1 .highlight::before { background: var(--sky); transform: rotate(-0.8deg); top: 10%; bottom: 4%; }
.h2 { color: var(--neutral); }
.hero__fit, .hero__cta-note { color: var(--slate-on-dark); }
.report { border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7); }
.report__label-stat { color: var(--blue); background: rgba(37,99,235,0.10); }
.pinned-quote { background: var(--navy-3); border-color: var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
.pinned-quote__text { color: var(--ink); }
.pinned-quote__who figcaption { color: var(--ink); }
.pinned-quote__who figcaption span { color: var(--slate-on-dark); }
.pinned-quote__who img { border-color: var(--line); }
.dot-ind { background: rgba(255,255,255,0.20); }
.dot-ind.is-active { background: var(--sky); }

/* Tools folded into the hero base */
.hero__tools { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; position: relative; z-index: 1; }
.hero__tools-cap { font-size: 14px; color: var(--slate-on-dark); margin-bottom: 18px; }
.tool { background: var(--surface); border-color: var(--line); color: var(--ink); }

/* ---------- Sections & surfaces ---------- */
.sec--paper { background: var(--paper); --ink: var(--navy); --ink-soft: var(--slate); --line: var(--neutral); --card: #fff; --sand: #E8EEF6; color: var(--navy); }
.sec--dark { background: var(--dark); }
.kicker { color: var(--sky); font-weight: 600; letter-spacing: 0.02em; }
.sec--paper .kicker { color: var(--blue); }
.sec--dark .kicker { color: var(--sky); }
.ttl { color: var(--ink); }
.ttl .lite { color: var(--ink-soft); font-weight: 600; }
.sec--dark .ttl { color: var(--ink); }
.sub { color: var(--ink-soft); }

/* Results on navy */
.numbers, .number { border-color: var(--line); }
.number__val { color: var(--ink); }
.number--key .number__val { color: var(--sky); }
.number__label { color: var(--ink); }
.number__ctx, .numbers__note { color: var(--slate-on-dark); }

/* Cards adapt to surface */
.card { background: var(--card); border-color: var(--line); box-shadow: none; }
.sec--paper .card { box-shadow: 0 18px 44px -30px rgba(11,31,59,0.25); }
.card__title { color: var(--ink); }
.card__text { color: var(--ink-soft); }
.mark { color: var(--neutral); }
.mark .node, .mark .ring { fill: var(--sky); stroke: var(--sky); }
.mark .ring { fill: none; }
.lbl { background: var(--sand); color: var(--ink-soft); }
.next { border-top-color: var(--line); }
.next__list li { color: var(--ink); }
.next__list li::marker { color: var(--sky); }

/* Live proof on paper */
.bento__text { background: var(--navy); }
.bento__text .ttl { color: var(--clean); }
.bento__text .ttl .lite { color: var(--slate-on-dark); }
.bento__text .sub, .legend { color: var(--slate-on-dark); }
.bento__text .kicker { color: var(--sky); }
.win { border-color: var(--neutral); box-shadow: 0 24px 60px -32px rgba(11,31,59,0.35); }
.win__bar { background: #EEF2F7; border-bottom-color: var(--neutral); }
.win__bar i { background: var(--neutral); }
.shot figcaption strong { color: var(--navy); }
.shot figcaption p { color: var(--slate); }
.ring--green { color: var(--blue); }
.ring--amber { color: var(--sky); }
.ring--ink { color: var(--navy); }
.ctaline { background: var(--navy); border-color: var(--navy); color: var(--clean); }
.ctaline p { color: var(--clean); }
.ctaline p span { color: var(--slate-on-dark); }

/* Problem section */
.dcard { background: var(--dark-card); border-color: var(--dark-line); }
.dcard .num { color: var(--sky); }
.dcard h3 { color: var(--ink); }

/* Story + testimonials on paper */
.story__p { color: var(--navy); }
.story__slot { border-color: #94A3B8; color: var(--slate); background: rgba(255,255,255,0.6); }
.head--after { margin-top: 96px; }
.who figcaption { color: var(--navy); }
.who figcaption a, .who figcaption span { color: var(--slate); }
.who figcaption a { text-decoration-color: var(--neutral); }
.who figcaption a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.card__text--quote { color: var(--navy); }
.mini { background: #fff; border-color: var(--neutral); }
.mini p { color: var(--slate); }
.more { color: var(--slate); }

/* FAQ: paper card on navy */
.faqcard { background: var(--paper); color: var(--navy); }
.faqcard .ttl { color: var(--navy); }
.faqcard .ttl .lite { color: var(--slate); }
.faqcard .sub, .person__text, .alt { color: var(--slate); }
.person__text strong { color: var(--navy); }
.person__photo { border-color: #94A3B8; }
.alt a { color: var(--blue); }
.faqsplit .faq__item { background: var(--surface); border-color: var(--line); }
.faqsplit .faq__q { color: var(--ink); }
.faq__chevron::before, .faq__chevron::after { background: var(--slate-on-dark); }
.faqsplit .faq__a p { color: var(--slate-on-dark); }

/* Footer: the brand's own lockup, not a text wordmark */
.foot { background: var(--dark); }
.foot__brand { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot__logo { width: min(100%, 560px); height: auto; display: block; }
.foot__tag { font-size: 13px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--slate-on-dark); }
.foot__row { border-top-color: var(--line); color: var(--slate-on-dark); }
.foot__row a { color: var(--ink); }

@media (max-width: 640px) {
  .hero__tools { margin-top: 48px; }
  .head--after { margin-top: 64px; }
  .foot__tag { letter-spacing: 0.18em; }
}

/* ---------- Who we work with ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fit__col { background: #fff; border: 1px solid var(--neutral); border-radius: var(--r-card); padding: 28px; }
.fit__h { font-size: 15px; font-weight: 600; color: var(--slate); margin-bottom: 16px; letter-spacing: 0.01em; }
.fit__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fit__list li { position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.55; color: var(--navy); }
.fit__list li::before {
  content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
.fit__list--yes li::before { background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fit__list--no li::before { background-color: #E8EEF6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2l-5.6 5.6' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fit__list--no li { color: var(--slate); }
.fit__examples { margin-top: 44px; }
.fit__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 14px; }
.fit__card { background: #fff; border: 1px solid var(--neutral); border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.fit__logo { height: 22px; width: auto; align-self: flex-start; }
.fit__logo--text { font-size: 15px; font-weight: 700; color: var(--navy); height: auto; }
.fit__card p { font-size: 14.5px; line-height: 1.6; color: var(--slate); }

/* ---------- Meet Bharat ---------- */
.bio { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.bio__p { font-size: 16.5px; line-height: 1.65; color: var(--neutral); margin-top: 16px; max-width: 560px; }
.bio__p:first-of-type { margin-top: 24px; }
.bio__facts { list-style: none; padding: 0; margin: 26px 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.bio__facts li { position: relative; padding-left: 32px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.bio__facts li::before {
  content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background-color: var(--blue);
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 640px) { .bio__facts { grid-template-columns: 1fr; } }
.bio__slot {
  aspect-ratio: 4 / 5; max-width: 440px; margin-left: auto; width: 100%;
  border: 1.5px dashed var(--slate-on-dark); border-radius: var(--r-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--slate-on-dark); text-align: center; padding: 24px; background: rgba(255,255,255,0.03);
}
.bio__slot span { font-size: 15px; font-weight: 600; }
.bio__slot small { font-size: 13px; }
.bio__photo { aspect-ratio: 4 / 5; max-width: 440px; margin-left: auto; width: 100%; object-fit: cover; border-radius: var(--r-card); display: block; border: 1px solid var(--line); }

@media (max-width: 960px) {
  .fit, .fit__cards, .bio { grid-template-columns: 1fr; }
  .bio__slot, .bio__photo { margin-left: 0; }
}

/* Photo in place */
.person__photo--set { border: 2px solid var(--neutral); overflow: hidden; }
.bio__photo { height: auto; object-position: 50% 30%; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7); }

/* Upwork banner under the portrait */
.bio__media { max-width: 440px; width: 100%; margin-left: auto; position: relative; }
.bio__media .bio__photo { margin-left: 0; max-width: none; }
.bio__badge {
  position: relative; margin: -30px 18px 0; padding: 14px 18px;
  background: var(--blue); color: #fff; border-radius: 14px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 18px 40px -18px rgba(37,99,235,0.6);
}
.bio__badge-logo { display: inline-flex; color: #fff; flex-shrink: 0; padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.28); }
.bio__badge-logo svg { width: 64px; height: auto; }
.bio__badge-text { font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,0.86); }
.bio__badge-text strong { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.bio__facts { grid-template-columns: 1fr; gap: 10px; }
@media (max-width: 960px) { .bio__media { margin-left: 0; } }

/* Reorder: problem section is headline-only; commitments live with Bharat */
.head--only { margin-bottom: 0; }
.promises { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.promises .kicker { display: block; margin-bottom: 18px; }
.fit__logo--sagebrook { height: auto; width: min(100%, 220px); }

.story--textonly { grid-template-columns: 1fr; max-width: 760px; }