/* ============================================================================
   JVS Switchgears — Home page
   ============================================================================
   Page-specific styles. Loaded after styles.css.
   ============================================================================ */

body.home-page { background: var(--jvs-white); }

/* ===== HERO ===== */
.hero {
  position: relative;
  width: 100%;
  min-height: 750px;
  background: var(--jvs-ink) url('assets/images/Header-Option-4.jpg') center / cover no-repeat;
  color: var(--jvs-off);
  overflow: hidden;
}
/* Soft localized scrim — the image is the hero, not the gradient. The radial
   sits behind the headline area only (upper-left where the eyebrow + headline
   live) so the rest of the photograph reads at full brightness. A whisper-thin
   top fade keeps the navbar legible without dimming the sky. Tones use
   --jvs-ink at controlled alpha; no new colour values introduced. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 22% 42%, rgba(10,20,24,0.62) 0%, rgba(10,20,24,0.28) 45%, transparent 78%),
    linear-gradient(180deg, rgba(10,20,24,0.28) 0%, transparent 22%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Home page navbar is transparent over the hero (dam photograph extends up
   under the navbar) and switches to cream once scrolled past the hero. The
   default transparent + light state is inherited from .navbar in styles.css;
   only the after-hero state needs explicit cream overrides here, scoped to
   .is-on-light. */
body.home-page .navbar.is-on-light {
  background: rgba(244, 241, 236, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--jvs-hairline-dark);
  color: var(--jvs-ink);
}
body.home-page .navbar.is-on-light .nav-cta { border-color: var(--jvs-hairline-dark-strong); }
body.home-page .navbar.is-on-light .mobile-menu-btn { border-color: var(--jvs-hairline-dark-strong); }
body.home-page .navbar.is-on-light .nav-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--jvs-hairline-dark);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.18);
}
body.home-page .navbar.is-on-light .nav-dropdown a { color: var(--jvs-ink); }
body.home-page .navbar.is-on-light .nav-dropdown a:hover { background: rgba(0, 160, 160, 0.10); color: var(--jvs-teal); }
body.home-page .navbar.is-on-light .nav-dropdown-label { color: var(--jvs-gray-dim); }
body.home-page .navbar.is-on-light .nav-dropdown-group { border-top-color: var(--jvs-hairline-dark); }

/* Logo swap: dark logos by default; on home page when navbar isn't yet past
   the hero, swap to the white variants so the mark is visible against the
   dark photograph + scrim. */
.logo-img--light { display: none; }
.logo-img--dark { display: inline-block; }
body.home-page .navbar:not(.is-on-light) .logo-img--dark { display: none; }
body.home-page .navbar:not(.is-on-light) .logo-img--light { display: inline-block; }

/* ----- Top row: headline + meta ----- */
.hero-headline-row {
  position: relative;
  z-index: 2;
  padding: calc(var(--nav-offset) + 32px) var(--jvs-pad-x) 56px;
  max-width: var(--jvs-container);
  margin: 0 auto;
}
.hero-headline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jvs-off);
  text-shadow: 0 1px 4px rgba(10, 20, 24, 0.65);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--jvs-teal-glow);
  box-shadow: 0 0 12px rgba(43, 212, 201, 0.55);
}
.hero-headline {
  margin: 0;
  font-size: clamp(56px, 9.5vw, 144px);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--jvs-off);
  max-width: 1180px;
  /* Layered text-shadow: a tight close-shadow + a wider soft halo. Lets the
     headline carry over bright spots in the photograph without needing a heavy
     overlay — the image breathes, the type holds. */
  text-shadow:
    0 2px 6px rgba(10, 20, 24, 0.55),
    0 8px 32px rgba(10, 20, 24, 0.45);
}
/* "Redefining" — solid white so it pops against the dam photograph in the hero */
.hero-headline .line-1 {
  display: inline-block;
  color: var(--jvs-off);
  -webkit-text-fill-color: var(--jvs-off);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}
/* Line-2 default colour applies to the cycling alt-words ("Testing Limits",
   "Accuracy Limits", "Voltage Limits") — they stay in the teal palette. */
.hero-headline .line-2 {
  display: block;
  color: var(--jvs-teal-bright);
}
.hero-headline .cycle-word {
  display: inline-block;
  min-width: 1ch;
  animation: jvsCycleIn 700ms cubic-bezier(.2,.7,.2,1) both;
}
/* The cycling word is split into an optional teal prefix ("Testing",
   "Accuracy", "Voltage") and the constant white tail "Limits". JS rebuilds
   the inner DOM each cycle. The prefix inherits --jvs-teal-bright from
   .line-2; the tail is forced white to match "Redefining". */
.hero-headline .cw-tail {
  color: var(--jvs-off);
}
.hero-headline .full-stop { color: var(--jvs-teal-bright); }
.hero-sub {
  margin: 32px 0 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--jvs-off);
  text-shadow: 0 1px 6px rgba(10, 20, 24, 0.6);
}
.hero-sub .em-num {
  color: var(--jvs-off);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  text-align: right;
  padding-bottom: 6px;
}
.hero-est {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244,241,236,0.55);
  line-height: 1.9;
}
.hero-est strong {
  color: rgba(244,241,236,0.85);
  font-weight: 500;
}

/* ----- Bottom row: video ----- */
.hero-video-row {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--jvs-white);
}
.hero-video-frame {
  position: relative;
  width: 100%;
  max-width: var(--jvs-container);
  margin: 0 auto;
  aspect-ratio: 21 / 9;
  background: var(--jvs-ink);
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-tint {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 75% 35%, rgba(0,160,160,0.14) 0%, transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(10,20,24,0.6) 100%);
  mix-blend-mode: multiply;
}

/* Play overlay (only shown if autoplay is blocked) */
.hero-video-frame .video-section-overlay {
  position: absolute; inset: 0;
  z-index: 8;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero-video-frame .video-section-overlay.is-hidden { display: none; }
.hero-video-frame .video-play-btn {
  pointer-events: auto;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(244,241,236,0.12);
  border: 1px solid var(--jvs-hairline-strong);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.hero-video-frame .video-play-btn:hover { background: rgba(0,160,160,0.30); transform: scale(1.04); }
.hero-video-frame .play-triangle {
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--jvs-off);
  margin-left: 4px;
}

.hero-bottom-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--jvs-hairline);
  padding: 18px var(--jvs-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244,241,236,0.55);
  background: var(--jvs-ink);
}
.hero-bottom-strip .scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-bottom-strip .scroll-cue::after {
  content: "";
  display: inline-block;
  width: 1px; height: 14px;
  background: rgba(244,241,236,0.55);
}

@media (max-width: 980px) {
  .hero-headline-row { padding: calc(var(--nav-offset) + 24px) 24px 36px; }
  .hero-headline-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .hero-side { align-items: flex-start; text-align: left; }
  .hero-video-frame { aspect-ratio: 16 / 9; }
  .hero-bottom-strip { gap: 12px; flex-wrap: wrap; }
}

/* ===== INTRO — Who we are ===== */
.intro {
  position: relative;
  background: var(--jvs-white);
  color: var(--jvs-ink);
  padding: 96px 0 112px;
}
.intro-grid {
  max-width: var(--jvs-container);
  margin: 0 auto;
  padding: 0 var(--jvs-pad-x);
}
.intro-eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jvs-teal);
  margin: 0 0 36px;
}
.intro-headline {
  margin: 0;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: var(--jvs-grad-future);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  max-width: 1400px;
  text-wrap: balance;
}
.intro-body {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1100px;
}
.intro-body p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--jvs-gray-dim); }
.intro-body strong { color: var(--jvs-ink); font-weight: 600; }

.intro-stats {
  margin-top: 96px;
  padding-top: 44px;
  border-top: 1px solid var(--jvs-hairline-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1100px;
}
.intro-stat-num {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--jvs-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.intro-stat-label {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jvs-gray-dim);
}
@media (max-width: 980px) {
  .intro { padding: 96px 0; }
  .intro-body { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .intro-stats { grid-template-columns: 1fr 1fr; margin-top: 64px; }
}

/* ===== TIMELINE ===== */
/* Tower photo fills the section. Saturation + contrast boosts make colours pop;
   thin top/bottom darken bars + side fades keep timeline text legible. */
.timeline-home {
  position: relative;
  background: var(--jvs-ink);
  color: var(--jvs-off);
  padding: 88px 0 80px;
  overflow: hidden;
  background-image: var(--timeline-bg, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.timeline-home::before {
  /* Lightened scrim — the transmission-tower photograph now drives the section.
     Alphas roughly halved from the previous heavy treatment; the saturation +
     contrast filter still lifts the colours so it doesn't look washed out. The
     gradient is heaviest at the very top and bottom edges (smooth handoff from
     the light intro section above and the white markets section below) and
     light through the middle where the timeline text overlaps the image. */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 20, 24, 0.55) 0%,
      rgba(10, 20, 24, 0.22) 18%,
      rgba(10, 20, 24, 0.18) 52%,
      rgba(10, 20, 24, 0.28) 88%,
      rgba(10, 20, 24, 0.55) 100%);
  z-index: 0;
  backdrop-filter: saturate(1.45) contrast(1.08);
  -webkit-backdrop-filter: saturate(1.45) contrast(1.08);
}
.timeline-home::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 80% 25%, rgba(0, 160, 160, 0.10) 0%, transparent 60%),
    linear-gradient(90deg, rgba(10, 20, 24, 0.20) 0%, transparent 18%, transparent 82%, rgba(10, 20, 24, 0.20) 100%);
  z-index: 1;
}
.timeline-home > .container { position: relative; z-index: 2; }

.timeline-title {
  margin: 0 0 80px;
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  background: var(--jvs-grad-dark);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.timeline-split {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.timeline-split::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--jvs-hairline-strong) 6%, var(--jvs-hairline-strong) 94%, transparent);
}
.timeline-node {
  position: relative;
  width: 50%;
  padding-top: 4px;
}
.timeline-node.timeline-left {
  align-self: flex-start;
  padding-right: 40px;
  text-align: right;
}
.timeline-node.timeline-right {
  align-self: flex-end;
  padding-left: 40px;
  text-align: left;
}
.timeline-dot {
  position: absolute;
  top: 18px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--jvs-teal-bright);
  box-shadow: 0 0 0 4px rgba(0,160,160,0.18);
}
.timeline-left  .timeline-dot { right: -6px; }
.timeline-right .timeline-dot { left: -6px; }

.timeline-year {
  display: inline-block;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--jvs-grad-future);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 18px;
  filter: drop-shadow(0 2px 10px rgba(10, 20, 24, 0.7));
}
.timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline-list li {
  font-size: 15px; line-height: 1.6;
  color: var(--jvs-off);
  text-shadow: 0 1px 4px rgba(10, 20, 24, 0.78), 0 4px 18px rgba(10, 20, 24, 0.5);
  position: relative;
}
.timeline-list li::before {
  content: ""; position: absolute;
  top: 10px;
  width: 6px; height: 1px;
  background: var(--jvs-teal-bright);
}
.timeline-right .timeline-list li { padding-left: 16px; }
.timeline-right .timeline-list li::before { left: 0; }
.timeline-left  .timeline-list li { padding-right: 16px; }
.timeline-left  .timeline-list li::before { right: 0; }

@media (max-width: 980px) {
  .timeline-home { padding: 80px 0; }
  .timeline-split { gap: 40px; }
  .timeline-split::before { left: 16px; }
  .timeline-node, .timeline-node.timeline-left, .timeline-node.timeline-right {
    width: 100%;
    align-self: flex-start;
    padding-left: 40px;
    padding-right: 0;
    text-align: left;
  }
  .timeline-left .timeline-dot, .timeline-right .timeline-dot {
    left: 10px; right: auto;
  }
  .timeline-left .timeline-list li, .timeline-right .timeline-list li {
    padding-left: 16px; padding-right: 0;
  }
  .timeline-left .timeline-list li::before, .timeline-right .timeline-list li::before {
    left: 0; right: auto;
  }
}

/* ===== PRODUCTS ===== */
.products-home {
  background: var(--jvs-white);
  min-height: 100vh;
  padding: clamp(40px, 5vh, 64px) 0;
  display: flex;
  flex-direction: column;
  /* Anchor heading to the top of the 100vh box so the Timeline → Products
     handoff reads as a clean section change rather than a floating gap. Any
     extra height from min-height: 100vh falls below the grid (which is
     where the Markets section then takes over). */
  justify-content: flex-start;
}
.products-home > .container {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}
.products-intro {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.2vh, 16px);
}
.products-title {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.0;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: var(--jvs-grad-future);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-wrap: balance;
}
.products-intro p {
  max-width: 760px;
  margin: 0;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.55;
  color: var(--jvs-gray-dim);
}

.products-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.products-feature-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease;
}
.products-feature-card:hover { transform: translateY(-4px); }

/* Image card — fills the card edge-to-edge (Trench-style).
   Square-ish aspect, no internal padding, photo crops to fill via object-fit:cover. */
.products-feature-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--jvs-surface);
  border-radius: var(--jvs-radius-card);
  overflow: hidden;
  margin-bottom: clamp(14px, 2vh, 22px);
  box-shadow: 0 30px 60px -30px rgba(10,20,24,0.18);
}
.products-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.products-feature-card:hover .products-feature-image img { transform: scale(1.04); }

.products-feature-title {
  margin: 0 0 clamp(6px, 1vh, 12px);
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: var(--jvs-grad-future);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.products-feature-desc {
  margin: 0;
  font-size: clamp(12px, 0.85vw, 13.5px);
  line-height: 1.55;
  color: var(--jvs-gray-dim);
}

.products-cta-row {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .products-home {
    min-height: 0;
    padding: 80px 0;
    justify-content: flex-start;
  }
  .products-feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .products-cta-row { justify-content: flex-start; }
}

/* ===== MARKETS WE SERVE ===== */
.markets-home {
  background: var(--jvs-white);
  padding: 80px 0 48px;
}
.markets-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 72px;
}
/* Mobile-only fallback heading — hidden by default; shown only on narrow
   screens where the overlay heading would be illegible against panel
   thumbnails. */
.markets-header-mobile { display: none; }
.markets-title {
  margin: 0 0 18px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  font-weight: 800;
  letter-spacing: -0.035em;
  /* "Markets We Serve" — solid white. The title sits over the dark panel
     grid via the .markets-header-overlay layer, so a flat white reads
     cleanly against the photo backgrounds. */
  color: var(--jvs-off);
  -webkit-text-fill-color: var(--jvs-off);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}
.markets-subtitle {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--jvs-gray-dim);
}

/* Strip + title-overlay live in the same relative wrapper so the heading
   can sit on top of the diagonal panel grid as a single integrated banner.
   The wrapper breaks out of the container's horizontal padding so the
   strip itself spans the full section width edge-to-edge. */
.markets-strip-wrap {
  position: relative;
  width: calc(100% + 2 * var(--jvs-pad-x));
  margin-left: calc(-1 * var(--jvs-pad-x));
  margin-right: calc(-1 * var(--jvs-pad-x));
}

/* Diagonal-strip layout. Five market panels + one "…and more" CTA. Each
   panel is shaped into a parallelogram via clip-path; adjacent panels
   overlap by the diagonal offset so their seams align perfectly. The
   first/last panels keep their outer edges straight so the strip's rounded
   corners stay clean. */
.markets-strip {
  position: relative;
  display: flex;
  height: 558px;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: var(--jvs-ink);
  box-shadow: 0 30px 60px -20px rgba(10, 20, 24, 0.22);
}

/* Title + subtitle overlaid at the TOP-CENTER of the panel grid. The radial
   scrim below follows the title position so legibility stays intact.
   pointer-events: none so panel clicks pass through. */
.markets-header-overlay {
  position: absolute;
  top: clamp(40px, 6vw, 72px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(820px, calc(100% - 96px));
  text-align: center;
  pointer-events: none;
}
.markets-header-overlay .markets-title {
  margin: 0 0 22px;
  filter:
    drop-shadow(0 1px 4px rgba(10, 20, 24, 0.7))
    drop-shadow(0 8px 32px rgba(10, 20, 24, 0.55));
}
.markets-header-overlay .markets-subtitle {
  margin: 0;
  color: var(--jvs-off);
  text-shadow:
    0 1px 4px rgba(10, 20, 24, 0.75),
    0 4px 22px rgba(10, 20, 24, 0.5);
}
/* Soft, restrained radial dark scrim behind the title only — pictures stay
   bright everywhere else. Title now sits at the TOP of the strip, so the
   scrim's vertical centre moves up to ~22% to follow it. */
.markets-strip-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 28px;
  background: radial-gradient(ellipse 55% 35% at 50% 22%,
    rgba(10, 20, 24, 0.36) 0%,
    rgba(10, 20, 24, 0.16) 55%,
    rgba(10, 20, 24, 0) 90%);
}

/* Each panel uses a parallelogram clip-path. The 120 px diagonal offset is
   absolute (not %) so it stays consistent regardless of panel width, and the
   adjacent panel overlaps by the same 120 px so the diagonal seam matches.
   Over a ~340 px-tall strip this is ~19° from vertical — visibly diagonal. */
.markets-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  text-decoration: none;
  clip-path: polygon(120px 0, 100% 0, calc(100% - 120px) 100%, 0 100%);
  transition: flex-grow .4s cubic-bezier(.2,.7,.2,1);
}
.markets-panel + .markets-panel { margin-left: -120px; }
.markets-panel:first-child {
  clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0 100%);
}
.markets-panel:last-child {
  clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%);
}
.markets-panel:hover { flex-grow: 1.25; }

.markets-panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.markets-panel:hover .markets-panel-bg { transform: scale(1.06); }

.markets-panel-overlay {
  /* Whisper-thin scrim so the photographs read at full brightness — only
     the very bottom edge gets a soft fade so the panel label remains
     legible. The label itself carries layered text-shadows for the heavy
     lifting, not the overlay. */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 20, 24, 0) 55%,
    rgba(10, 20, 24, 0.18) 80%,
    rgba(10, 20, 24, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

.markets-panel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 2.4vw, 32px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* First panel sits against the strip's rounded corner — push the label right
   so it sits inside the diagonal-clipped area, not against the corner */
.markets-panel:first-child .markets-panel-content {
  padding-left: clamp(40px, 5vw, 80px);
}
.markets-panel-label {
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--jvs-off);
  /* Layered shadows — tight close-shadow + wider halo — so the label reads
     against a brighter underlying photograph without needing a heavy panel
     overlay. */
  text-shadow:
    0 1px 4px rgba(10, 20, 24, 0.78),
    0 4px 18px rgba(10, 20, 24, 0.5);
  white-space: nowrap;
}

/* CTA panel — solid ink, no overlay, label centred */
.markets-panel--cta {
  background: var(--jvs-ink);
  transition: background .35s ease, flex-grow .4s cubic-bezier(.2,.7,.2,1);
}
.markets-panel--cta:hover { background: var(--jvs-teal-deep); }
.markets-panel--cta .markets-panel-content {
  inset: 0;
  padding: 0 clamp(20px, 3vw, 56px) 0 0;
  justify-content: center;
}
.markets-panel-arrow {
  display: inline-block;
  font-size: 18px;
  color: var(--jvs-teal-glow);
  transition: transform .3s ease;
}
.markets-panel--cta:hover .markets-panel-arrow { transform: translateX(4px); }

/* Tablet — modest size reduction */
@media (max-width: 1080px) {
  .markets-home { padding: 80px 0 96px; }
  .markets-strip { height: 460px; border-radius: 22px; }
}

/* Mobile — collapse to a vertical stack of full-width panels, no diagonals;
   swap the overlay heading for the standalone in-flow heading. */
@media (max-width: 768px) {
  .markets-header-mobile { display: block; }
  .markets-header-overlay,
  .markets-strip-wrap::before { display: none; }
  .markets-strip {
    flex-direction: column;
    height: auto;
    border-radius: 18px;
  }
  .markets-panel,
  .markets-panel:first-child,
  .markets-panel:last-child {
    flex: none;
    height: 140px;
    clip-path: none;
    margin-left: 0;
  }
  .markets-panel:first-child .markets-panel-content,
  .markets-panel-content {
    padding: 18px 22px;
  }
  .markets-panel--cta {
    height: 84px;
  }
  .markets-panel:hover { flex-grow: initial; }
  .markets-panel:hover .markets-panel-bg { transform: scale(1.04); }
}

/* ===== TRENDING NEWS ===== */
.trending-news {
  background: var(--jvs-ink);
  color: var(--jvs-off);
  padding: clamp(36px, 5vh, 64px) 0;
}
.trending-news-title {
  margin: 0 0 clamp(20px, 3vh, 36px);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: var(--jvs-grad-dark);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.trending-news-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
}
.trending-featured {
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--jvs-radius-card);
  overflow: hidden;
  background: var(--jvs-ink-soft);
  border: 1px solid var(--jvs-hairline);
  transition: border-color .25s ease;
}
.trending-featured:hover { border-color: var(--jvs-hairline-strong); }
.trending-featured-image {
  height: clamp(160px, 28vh, 300px);
  background: var(--jvs-ink);
  overflow: hidden;
}
.trending-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.trending-featured:hover .trending-featured-image img { transform: scale(1.04); }
.trending-featured-content { padding: clamp(16px, 2vh, 24px); }
.trending-featured-content h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--jvs-off);
}
.trending-featured-content p {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.55;
  color: rgba(244,241,236,0.72);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trending-items-col { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); }
.trending-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px;
  background: rgba(244,241,236,0.03);
  border: 1px solid var(--jvs-hairline);
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  outline: none;
}
.trending-item:hover, .trending-item:focus-visible {
  background: rgba(244,241,236,0.06);
  border-color: var(--jvs-hairline-strong);
  transform: translateY(-2px);
}
.trending-item-image {
  flex: 0 0 clamp(64px, 8vh, 88px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--jvs-ink);
}
.trending-item-image img { width: 100%; height: 100%; object-fit: cover; }
.trending-item-title {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--jvs-off);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 980px) {
  .trending-news { padding: 56px 0; }
  .trending-news-grid { grid-template-columns: 1fr; gap: 24px; }
  .trending-featured-image { height: 200px; }
}

/* ===== CUSTOMER LOGOS ===== */
.customer-logos {
  background: var(--jvs-white);
  padding: clamp(28px, 4vh, 48px) 0;
  border-bottom: 1px solid var(--jvs-hairline-dark);
}
.customer-logos-title {
  margin: 0 0 clamp(16px, 2vh, 24px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jvs-gray-dim);
}
.customer-logos-scroll-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.customer-logos-scroll {
  display: flex;
  align-items: center;
  gap: 64px;
  animation: jvsScrollLogos 50s linear infinite;
  width: max-content;
}
.customer-logo-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity .25s, filter .25s;
}
.customer-logo-item:hover { opacity: 1; filter: grayscale(0); }
.customer-logo-item img { max-height: 48px; max-width: 160px; object-fit: contain; }
.customer-logos-loading { color: var(--jvs-gray-dim); padding: 12px 0; font-size: 13px; }

@media (max-width: 980px) {
  .customer-logos { padding: 40px 0; }
  .customer-logos-scroll { gap: 40px; }
  .customer-logo-item { height: 36px; }
  .customer-logo-item img { max-height: 36px; max-width: 120px; }
}

/* ============================================================================
   WHY CHOOSE US — light band of feature pillars (mirrors Intro / Who We Are
   styling: white background, ink text, gradient headline, teal eyebrow + icons)
   ============================================================================ */
.why-choose {
  position: relative;
  background: var(--jvs-white);
  color: var(--jvs-ink);
  min-height: 980px;
  /* Asymmetric padding: tight top (heading sits close to Markets section)
     and trimmed bottom (Learn More CTA's own background carries the visual
     weight, so we don't need a thick padded bottom here). */
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Anchor content to the top of the min-height area so the heading isn't
     pushed downward by flex centering when natural content height is less
     than 980px. */
  justify-content: flex-start;
}
/* Subtle radial line halo behind the heading. Inverted to dark-on-light: very
   low-alpha ink rings on the white field so the contour pattern reads softly
   without competing with the cards. */
.why-choose::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(10,20,24,0.040) 0%, transparent 65%),
    repeating-radial-gradient(circle at 50% 30%, transparent 0, transparent 86px, rgba(10,20,24,0.028) 86px, rgba(10,20,24,0.028) 87px);
  pointer-events: none;
  z-index: 0;
}
.why-choose .container { position: relative; z-index: 1; }

.why-choose-header {
  text-align: center;
  max-width: 880px;
  margin: 0 auto clamp(56px, 7vw, 96px);
}
.why-choose-eyebrow {
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jvs-teal);
}
.why-choose-title {
  margin: 0 0 28px;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  background: var(--jvs-grad-future);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-wrap: balance;
}
.why-choose-sub {
  margin: 0 auto;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--jvs-gray-dim);
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(32px, 4vw, 56px);
  row-gap: clamp(40px, 5vw, 72px);
}
.why-choose-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  align-items: start;
}
/* No circular backdrop — the icon stands on its own. On the light field we use
   --jvs-teal (calmer than --jvs-teal-glow which is tuned for dark backgrounds). */
.why-choose-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.why-choose-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--jvs-teal);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-choose-card-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--jvs-ink);
}
.why-choose-card-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--jvs-gray-dim);
}

@media (max-width: 980px) {
  .why-choose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-choose-grid { grid-template-columns: 1fr; }
  .why-choose-card { grid-template-columns: 36px 1fr; gap: 16px; }
  .why-choose-icon { width: 36px; height: 36px; }
  .why-choose-icon svg { width: 28px; height: 28px; }
}