/* ============================================================
   JP ROBOTIC — HOMEPAGE POLISH (NEW FILE)
   Add as its own Asset Injector CSS rule. Set the Path/Pages
   condition to: <front>
   Load it after 00-tokens.css, "A JPR New Working II.css" and
   "A JPR Working II (add on).css".

   This file only adds things that were missing or broken on the
   live homepage — it doesn't re-style anything that already
   worked. See the companion "homepage-body-v2.html" for the small
   set of classes (hero-svc-*, h2--xl/h2--lg, hero-cta-row,
   credential-row) this file expects to find in the markup —
   they replace ad-hoc inline styles that couldn't be targeted
   from CSS at all.
   ============================================================ */

/* ---------------------------------------------------------------
   1. HEADING SIZE TIERS
   Restores the per-section heading scale that "A JPR Working II
   (add on).css" used to cancel (every h2 was rendering at a flat
   2.5rem). Add .h2--xl to "Stop managing five vendors," "We work
   best with serious organizations," and "We've been in high-stakes
   situations before." Add .h2--lg to "Built. Deployed. Running."
   --------------------------------------------------------------- */
h2.h2--xl { font-size: clamp(2.25rem, 5vw, 3.625rem) !important; line-height: 1.05 !important; }
h2.h2--lg { font-size: clamp(2rem, 4vw, 3.25rem) !important; line-height: 1.08 !important; }

/* ---------------------------------------------------------------
   2. HERO SUBHEAD
   The lede paragraph under the H1 ("Engineering Support. Software.
   Design...") was falling back to plain 16px body copy. Lede text
   should read larger and stop at a comfortable line length.
   --------------------------------------------------------------- */
.jpr-hero-sub {
  font-size: clamp(16px, 1.6vw, 18px) !important;
  line-height: 1.65 !important;
  max-width: 46ch;
  margin-bottom: 28px !important;
}

/* ---------------------------------------------------------------
   3. HERO CTA ROW ALIGNMENT
   .btn-jpr carries a 24px top margin sitewide (see "A JPR Working
   II (add on).css" section rhythm rule) but .btn-jpr-ghost
   doesn't, so "Let's Talk" and "See Our Work" sat at different
   heights in the hero. Zero both out inside the row and space the
   row itself instead. Add class="hero-cta-row" to that wrapper.
   --------------------------------------------------------------- */
.jpr-hero .hero-cta-row { margin-top: 12px; }
.jpr-hero .hero-cta-row .btn-jpr,
.jpr-hero .hero-cta-row .btn-jpr-ghost { margin-top: 0 !important; }

/* ---------------------------------------------------------------
   4. FOUR-DISCIPLINE STRIP
   (Infrastructure / Software & Web / Engineering Support & CAD /
   Design & Creative). These four cards were built entirely from
   inline styles, which meant: no hover state, and a 12px
   description line that ran smaller than anything else on the
   page. Swap the inline styles for these classes.
   --------------------------------------------------------------- */
.hero-svc-block { transition: background-color .25s ease; }
.hero-svc-block:hover { background-color: var(--bg2); }

.hero-svc-num {
  color: var(--muted);
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .12em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.hero-svc-icon { color: var(--blue); display: block; margin-bottom: 10px; transition: color .25s ease; }
.hero-svc-block:hover .hero-svc-icon { color: var(--gold); }
.hero-svc-title {
  color: var(--heading);
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.hero-svc-desc { color: var(--text); font-size: 13px; line-height: 1.5; }

/* ---------------------------------------------------------------
   5. SECONDARY / SMALL BUTTON
   .btn-jpr-sm shows up on half a dozen links ("How We Work,"
   "View All Work," "About the Team"...) but was never defined, so
   those were rendering as full-size ghost buttons — too heavy for
   an in-line secondary link. The compound selector below beats
   ".btn-jpr-ghost" on specificity, so it wins regardless of file
   load order.
   --------------------------------------------------------------- */
.btn-jpr-ghost.btn-jpr-sm,
.btn-jpr.btn-jpr-sm { padding: 10px 20px !important; font-size: 13px !important; }

/* ---------------------------------------------------------------
   6. FINAL CTA WATERMARK
   The closing "Ready when you are" section already carries
   data-word="TALK" in the markup, but nothing ever rendered it —
   it reads like it was meant to be a giant faint background word.
   --------------------------------------------------------------- */
.jpr-cta { position: relative; overflow: hidden; }
.jpr-cta::before {
  content: attr(data-word);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 1;
  color: var(--heading);
  opacity: .04;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.jpr-cta .jpr-cta-inner { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   7. VETERAN-SECTION CREDENTIAL LIST
   "United States Veteran" / "Graduate Engineer & Designer" were
   plain flex rows with no marker. Add class="credential-row" to
   each and it reads as a checklist instead of stray text.
   --------------------------------------------------------------- */
.credential-row {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-family: var(--fm);
  font-size: 10px;
  gap: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.credential-row::before {
  content: '\2713';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

/* ---------------------------------------------------------------
   8. SCROLL-REVEAL
   JPR New.js already toggles a .visible class on .reveal elements
   via IntersectionObserver as they scroll into view — there was
   just no CSS transition to animate, so it had no visible effect.
   --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.visible { transition-delay: .1s; }
.reveal-delay-2.visible { transition-delay: .2s; }
.reveal-delay-3.visible { transition-delay: .3s; }

/* ---------------------------------------------------------------
   9. HERO ENTRANCE
   Same story as .reveal — the .hero-fade class on the eyebrow/H1/
   subhead/CTA row was never wired to anything. Simple staggered
   fade-up on load.
   --------------------------------------------------------------- */
@keyframes jpr-hero-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hero-fade { animation: jpr-hero-fade .7s ease both; }
.jpr-hero-inner .eyebrow.hero-fade { animation-delay: .05s; }
.jpr-hero-inner h1.hero-fade { animation-delay: .15s; }
.jpr-hero-inner p.hero-fade { animation-delay: .25s; }
.jpr-hero-inner .hero-cta-row.hero-fade { animation-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-fade { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   10. MOBILE IMAGE GRID
   The "Who We Work With" 2x2 image grid gets cramped under about
   480px — a little extra height keeps the photos legible.
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  .jpr-ind { min-height: 260px !important; }
}