/* ==================================================================
   Homepage V2 overrides — Jon's feedback round (Jul 2026)
   1. Mono font retired: Montserrat everywhere ("Claude Code" look)
   2. Nav: 1300 number + "Get an instant quote" w/ hover bubble
   3. Hero assurance row: 20 years lockup + money back guarantee
   4. Closing CTA block above footer
   ================================================================== */

/* 0 ▸ No hover underlines anywhere (overrides DS base.css a:hover) */
a:hover, a:focus { text-decoration: none; }

/* V3: hero kicker rendered as the page H1 */
.hh-a-kicker { margin: 0; font-weight: 600; }

/* 1 ▸ Font swap: every mono label now renders in Montserrat */:root, html[data-theme="dark"] {
  --font-mono: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
/* Montserrat needs a touch more weight + slightly tighter tracking
   than JetBrains Mono did at these sizes */
[class*="eyebrow"], .hh-clients-label, .rb-cases-label {
  font-weight: 600 !important;
  letter-spacing: 0.14em;
}

/* 2 ▸ Nav phone number (two-line "Contact Us" item) */
.hh-navphone:hover, .hh-drawer-phone:hover, .ft-contact a:hover { text-decoration: none; }
.hh-navphone .hh-navitem-label svg, .hh-navphone [data-lucide] { width: 16px; height: 16px; }
@media (max-width: 640px) { .hh-navphone { display: none; } }
.hh-drawer-phone {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0 2px; text-decoration: none;
  font-size: 16px; font-weight: 800; color: #fff;
}

/* 2b ▸ "Instant" hover bubble on the nav CTA */
.hh-quote-wrap { position: relative; display: inline-flex; }
.hh-quote-tip {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 10;
  width: max-content; max-width: 260px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--surface-ink, #0d0f0f); color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 40px rgba(13,15,15,0.45);
  font-size: 12.5px; font-weight: 600; line-height: 1.45; text-align: center;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 160ms var(--ease-out, ease), transform 180ms var(--ease-out, ease);
}
.hh-quote-tip b { color: var(--fbf-green, #28dc9a); font-weight: 800; }
.hh-quote-tip::before {
  content: ""; position: absolute; top: -5px; right: 26px;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--surface-ink, #0d0f0f);
  border-left: 1px solid rgba(255,255,255,0.14);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hh-quote-wrap:hover .hh-quote-tip,
.hh-quote-wrap:focus-within .hh-quote-tip { opacity: 1; transform: translateY(0); }

/* 3 ▸ Hero assurance row (glowing dots, matches .rb-dot) */
.hh-assure {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-top: 26px;
}
.hh-assure-dot {
  flex-shrink: 0; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fbf-green, #28dc9a);
  box-shadow: 0 0 0 0 rgba(40,220,154,0.55), 0 0 12px 2px rgba(40,220,154,0.75);
  animation: rb-pulse 2.2s var(--ease-out, ease) infinite;
}
@media (prefers-reduced-motion: reduce) { .hh-assure-dot { animation-duration: 3.2s; } }
.hh-assure-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.9);
}
.hh-assure-item svg { flex-shrink: 0; }
.hh-assure-sep { width: 1px; height: 30px; background: rgba(255,255,255,0.22); }

/* 3b ▸ AI tool: wider card so the note fits on two lines */
.ais-top { grid-template-columns: 1fr 480px; gap: 64px; }

/* 3c ▸ LLM platform logo strip — larger, centered. The PNG carries ~12px of
   transparent padding around the pill; negative bottom margin evens out the
   card's visual top/bottom padding. */
.ais-tool-llms-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px auto 2px; }
.ais-tool-llms { display: block; margin: 0; height: 26px; width: auto; }
.ais-llm-chatgpt { display: inline-flex; align-items: center; gap: 8px; }
.ais-llm-chatgpt img {
  height: 38px; width: auto;
  display: block;
}
.ais-llm-chatgpt span {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: #0d0f0f; line-height: 1;
}
.ais-tool { padding: 38px 38px 38px !important; text-align: center; }
.ais-tool .ais-tool-title, .ais-tool .ais-tool-sub, .ais-tool .ais-tool-note { text-align: center; }
.ais-tool .ais-tool-sub { margin-left: auto; margin-right: auto; }

/* 4 ▸ Closing CTA block (above footer) */
.ccta {
  position: relative; overflow: hidden;
  background: var(--surface-ink, #0d0f0f);
  padding: 110px 80px 116px; font-family: var(--font-sans);
  color: #fff; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ccta.fbf-glow::after {
  background: radial-gradient(70% 70% at 50% 115%, rgba(255,166,62,0.30) 0%, rgba(255,120,40,0.10) 45%, transparent 72%);
}
.ccta-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.ccta-eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fbf-green, #28dc9a); font-weight: 600;
}
.ccta-title {
  margin: 20px 0 0; font-size: 56px; font-weight: 900; line-height: 1.02;
  letter-spacing: -0.03em; color: #fff; text-wrap: balance;
}
.ccta-title mark {
  background: var(--gradient-signature, linear-gradient(90deg, #ff43a4, #ffa63e));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ccta-sub {
  margin: 22px auto 0; max-width: 620px;
  font-size: 17px; line-height: 1.65; font-weight: 500;
  color: rgba(255,255,255,0.72); text-wrap: pretty;
}
.ccta-sub b { color: #fff; font-weight: 700; }
.ccta-ctas {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; margin-top: 36px;
}
.ccta-guarantee {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; font-size: 13.5px; font-weight: 700;
  color: rgba(255,255,255,0.85);
}

@media (max-width: 760px) {
  .ccta { padding: 72px 24px 80px; }
  .ccta-title { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-quote-tip { transition: none; }
}