/* ==========================================================================
   JV Digital Network — 2026 Redesign
   Override layer. Loaded LAST, after style.css / responsive.css / base-color.php
   Palette derived from the JV Digital Network logo.
   ========================================================================== */

:root {
  /* --- Brand: blues (from "JV Digital" wordmark + wifi glyph) --- */
  --jv-navy-900: #041B36;
  --jv-navy-800: #072747;
  --jv-navy-700: #0B3560;
  --jv-navy-600: #0F4479;
  --jv-blue-500: #0F5C9E;
  --jv-blue-400: #1B76BE;
  --jv-sky-300:  #35A0DC;
  --jv-sky-200:  #7CC6EE;

  /* --- Brand: oranges (from "J" + "NETWORK") --- */
  --jv-orange-600: #B8410A;
  --jv-orange-500: #D2600F;
  --jv-orange-400: #E08A2E;
  --jv-orange-300: #F0A94E;

  /* --- Neutrals --- */
  --jv-ink:    #0A1929;
  --jv-body:   #4A5C6E;
  --jv-line:   rgba(255, 255, 255, .12);
  --jv-white:  #FFFFFF;

  /* --- Composites --- */
  --jv-grad-orange: linear-gradient(135deg, var(--jv-orange-400) 0%, var(--jv-orange-600) 100%);
  --jv-grad-blue:   linear-gradient(135deg, var(--jv-blue-400) 0%, var(--jv-navy-700) 100%);
  --jv-grad-hero:   linear-gradient(115deg, #041B36 0%, #072747 38%, #0B3560 68%, #0F4479 100%);

  --jv-shadow-sm: 0 2px 8px rgba(4, 27, 54, .08);
  --jv-shadow-md: 0 12px 32px rgba(4, 27, 54, .14);
  --jv-shadow-lg: 0 28px 64px rgba(4, 27, 54, .28);
  --jv-shadow-orange: 0 12px 28px rgba(184, 65, 10, .38);

  --jv-radius-sm: 8px;
  --jv-radius:    14px;
  --jv-radius-lg: 22px;
  --jv-radius-pill: 999px;

  --jv-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   1. HERO
   ========================================================================== */

.jv-hero {
  position: relative;
  overflow: hidden;
  background: var(--jv-grad-hero);
  padding: 132px 0 0;
  isolation: isolate;
}

/* --- background layers --- */

.jv-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .16;
  filter: saturate(.5) contrast(1.05);
  z-index: 0;
}

/* soft orange + sky glows so the navy never reads flat */
.jv-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.jv-hero__glow--orange {
  width: 620px;
  height: 620px;
  right: -160px;
  top: -180px;
  background: radial-gradient(circle, rgba(224, 138, 46, .38) 0%, rgba(224, 138, 46, 0) 70%);
  animation: jvDrift 18s var(--jv-ease) infinite alternate;
}

.jv-hero__glow--blue {
  width: 560px;
  height: 560px;
  left: -200px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(53, 160, 220, .32) 0%, rgba(53, 160, 220, 0) 70%);
  animation: jvDrift 22s var(--jv-ease) infinite alternate-reverse;
}

@keyframes jvDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-40px, 50px, 0) scale(1.12); }
}

/* fine grid, echoes "network" */
.jv-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(124, 198, 238, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 198, 238, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
}

.jv-hero__inner {
  position: relative;
  z-index: 2;
}

/* --- left column: copy --- */

.jv-hero__copy {
  padding: 40px 0 96px;
  max-width: 620px;
}

.jv-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 12px;
  border-radius: var(--jv-radius-pill);
  background: rgba(224, 138, 46, .13);
  border: 1px solid rgba(240, 169, 78, .34);
  color: var(--jv-orange-300);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 26px;
  backdrop-filter: blur(6px);
}

.jv-hero__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jv-orange-300);
  box-shadow: 0 0 0 0 rgba(240, 169, 78, .7);
  animation: jvPulse 2.2s infinite;
  flex: none;
}

@keyframes jvPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 169, 78, .7); }
  70%  { box-shadow: 0 0 0 12px rgba(240, 169, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 169, 78, 0); }
}

.jv-hero__title {
  color: var(--jv-white);
  font-size: 56px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}

.jv-hero__title .jv-accent {
  background: linear-gradient(100deg, var(--jv-orange-300) 0%, var(--jv-orange-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jv-hero__lede {
  color: rgba(255, 255, 255, .74);
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 38px;
  max-width: 520px;
}

/* --- buttons --- */

.jv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.jv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  border-radius: var(--jv-radius-pill);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .28s var(--jv-ease), box-shadow .28s var(--jv-ease),
              background-color .28s var(--jv-ease), color .28s var(--jv-ease),
              border-color .28s var(--jv-ease);
  cursor: pointer;
  white-space: nowrap;
}

.jv-btn i { font-size: 13px; transition: transform .28s var(--jv-ease); }

.jv-btn--primary {
  background: var(--jv-grad-orange);
  color: var(--jv-white);
  box-shadow: var(--jv-shadow-orange);
}

.jv-btn--primary:hover,
.jv-btn--primary:focus {
  color: var(--jv-white);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(184, 65, 10, .48);
}

.jv-btn--primary:hover i { transform: translateX(4px); }

.jv-btn--ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .26);
  color: var(--jv-white);
  backdrop-filter: blur(8px);
}

.jv-btn--ghost:hover,
.jv-btn--ghost:focus {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: var(--jv-white);
  transform: translateY(-3px);
}

/* --- inline proof points --- */

.jv-hero__proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding-top: 28px;
  border-top: 1px solid var(--jv-line);
}

.jv-hero__proof-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  font-weight: 500;
}

.jv-hero__proof-item i {
  color: var(--jv-sky-300);
  font-size: 14px;
}

/* --- right column: signal card --- */

.jv-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding: 24px 0 102px;
  perspective: 1000px;
}

.jv-isp-graphic {
  position: relative;
  width: min(520px, 90vw);
  aspect-ratio: 1.05;
  border-radius: 30px;
  transform-style: preserve-3d;
  animation: jvNetworkFloat 8s ease-in-out infinite;
}

.jv-isp-graphic::before {
  content: "";
  position: absolute;
  inset: 5% 2% 4%;
  border-radius: 34px;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(124, 198, 238, .14) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(124, 198, 238, .12) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 52%, rgba(53, 160, 220, .3), transparent 34%),
    radial-gradient(circle at 78% 30%, rgba(240, 169, 78, .16), transparent 20%),
    linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025));
  background-size: 54px 54px, 54px 54px, auto, auto;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 70px rgba(53, 160, 220, .1), 0 34px 90px rgba(4, 27, 54, .26);
  transform: rotateX(58deg) rotateZ(-8deg) translateY(22px);
}

.jv-isp-graphic::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 78%;
  height: 18px;
  border-radius: 50%;
  background: rgba(4, 27, 54, .36);
  filter: blur(18px);
  transform: translateX(-50%);
}

.jv-isp-backbone,
.jv-isp-router,
.jv-isp-endpoint,
.jv-isp-signal,
.jv-isp-packet {
  position: absolute;
  display: block;
  z-index: 2;
}

.jv-isp-backbone {
  left: 50%;
  top: 52%;
  width: 39%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 198, 238, .05), rgba(124, 198, 238, .98), rgba(240, 169, 78, .84), rgba(255, 255, 255, .2));
  box-shadow: 0 0 18px rgba(53, 160, 220, .55), 0 0 32px rgba(240, 169, 78, .2);
  transform-origin: 0 50%;
  overflow: hidden;
}

.jv-isp-backbone i {
  position: absolute;
  inset: 0 auto 0 -42%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #fff, var(--jv-orange-300), transparent);
  animation: jvFiberData 1.8s linear infinite;
}

.jv-isp-backbone--one { transform: rotate(-31deg); width: 38%; }
.jv-isp-backbone--two { transform: rotate(23deg); width: 39%; }
.jv-isp-backbone--three { transform: rotate(144deg); width: 35%; }
.jv-isp-backbone--four { transform: rotate(201deg); width: 38%; }
.jv-isp-backbone--two i { animation-delay: -.45s; }
.jv-isp-backbone--three i { animation-delay: -.9s; }
.jv-isp-backbone--four i { animation-delay: -1.35s; }

.jv-isp-router {
  left: 50%;
  top: 52%;
  width: 126px;
  height: 86px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(225, 238, 249, .86));
  box-shadow: 0 20px 54px rgba(4, 27, 54, .28), 0 0 50px rgba(53, 160, 220, .34), inset 0 0 24px rgba(53, 160, 220, .1);
  transform: translate(-50%, -50%) rotateX(4deg);
  z-index: 5;
}

.jv-isp-router::before,
.jv-isp-router::after {
  content: "";
  position: absolute;
  top: -38px;
  width: 4px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--jv-sky-200), rgba(255, 255, 255, .7));
  box-shadow: 0 0 16px rgba(124, 198, 238, .68);
  transform-origin: bottom center;
}

.jv-isp-router::before { left: 30px; transform: rotate(-18deg); }
.jv-isp-router::after { right: 30px; transform: rotate(18deg); }

.jv-isp-router span {
  position: absolute;
  bottom: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--jv-sky-300);
  box-shadow: 0 0 16px rgba(53, 160, 220, .75);
  animation: jvRouterBlink 1.8s ease-in-out infinite;
}

.jv-isp-router span:nth-child(1) { left: 32px; }
.jv-isp-router span:nth-child(2) { left: 57px; animation-delay: -.55s; background: var(--jv-orange-300); }
.jv-isp-router span:nth-child(3) { left: 82px; animation-delay: -1.05s; }

.jv-isp-endpoint {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(233, 241, 249, .9));
  color: var(--jv-blue-500);
  font-size: 22px;
  box-shadow: 0 18px 44px rgba(4, 27, 54, .22), 0 0 32px rgba(124, 198, 238, .24);
  animation: jvEndpointGlow 3.2s ease-in-out infinite;
}

.jv-isp-endpoint::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 24px;
  border: 1px solid rgba(124, 198, 238, .18);
  opacity: .65;
}

.jv-isp-endpoint--home { left: 76%; top: 24%; }
.jv-isp-endpoint--tower { left: 76%; top: 65%; animation-delay: -.8s; color: var(--jv-orange-500); }
.jv-isp-endpoint--cloud { left: 11%; top: 37%; animation-delay: -1.6s; }
.jv-isp-endpoint--server { left: 19%; top: 70%; animation-delay: -2.4s; color: var(--jv-orange-500); }

.jv-isp-signal {
  left: 50%;
  top: 52%;
  width: 210px;
  height: 210px;
  border: 2px solid rgba(124, 198, 238, .3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, .45) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, .45) 82%, transparent 100%);
  box-shadow: 0 0 28px rgba(53, 160, 220, .16), inset 0 0 28px rgba(53, 160, 220, .08);
  animation: jvSignalWave 3s ease-out infinite;
}

.jv-isp-signal--two { width: 292px; height: 292px; animation-delay: -1s; border-color: rgba(240, 169, 78, .2); }
.jv-isp-signal--three { width: 370px; height: 370px; animation-delay: -2s; }

.jv-isp-packet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px #fff, 0 0 32px var(--jv-orange-300);
  z-index: 6;
}

.jv-isp-packet--one { left: 50%; top: 52%; animation: jvPacketNE 2.4s linear infinite; }
.jv-isp-packet--two { left: 50%; top: 52%; animation: jvPacketSE 2.6s linear infinite -.7s; background: var(--jv-sky-200); }
.jv-isp-packet--three { left: 50%; top: 52%; animation: jvPacketNW 2.7s linear infinite -1.15s; }
.jv-isp-packet--four { left: 50%; top: 52%; animation: jvPacketSW 2.9s linear infinite -1.65s; background: var(--jv-sky-200); }

@keyframes jvNetworkFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-14px) rotateX(2deg) rotateY(-3deg); }
}

@keyframes jvFiberData {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(380%); opacity: 0; }
}

@keyframes jvRouterBlink {
  0%, 100% { opacity: .42; transform: scale(.84); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes jvEndpointGlow {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-5px); filter: brightness(1.12); }
}

@keyframes jvSignalWave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.56); }
  35% { opacity: .72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}

@keyframes jvPacketNE {
  0% { transform: translate(0, 0); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translate(154px, -108px); opacity: 0; }
}

@keyframes jvPacketSE {
  0% { transform: translate(0, 0); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translate(158px, 90px); opacity: 0; }
}

@keyframes jvPacketNW {
  0% { transform: translate(0, 0); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translate(-162px, -62px); opacity: 0; }
}

@keyframes jvPacketSW {
  0% { transform: translate(0, 0); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translate(-130px, 92px); opacity: 0; }
}

/* ==========================================================================
   2. FEATURE STRIP — reuses the CMS feature rows, restyled as cards
      that overlap the bottom edge of the hero.
   ========================================================================== */

.jv-features {
  position: relative;
  z-index: 3;
  margin-top: -68px;
  padding-bottom: 0;
}

/* The legacy theme yanks the intro block up by -213px to sit under the old
   feature bar. That bar is gone, so reset it and give the new cards room. */
.intro-section {
  margin-top: 0 !important;
  padding-top: 84px;
}

.jv-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.jv-feature {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--jv-radius);
  background: var(--jv-white);
  box-shadow: var(--jv-shadow-md);
  overflow: hidden;
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease);
}

.jv-feature::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--jv-grad-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--jv-ease);
}

.jv-feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px rgba(4, 27, 54, .18);
}

.jv-feature:hover::after { transform: scaleY(1); }

.jv-feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 21px;
  color: var(--jv-blue-500);
  background: rgba(15, 92, 158, .09);
  margin-bottom: 18px;
  transition: background-color .35s var(--jv-ease), color .35s var(--jv-ease);
}

.jv-feature:hover .jv-feature__icon {
  background: var(--jv-grad-orange);
  color: #fff;
}

.jv-feature__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--jv-ink);
  line-height: 1.4;
  margin: 0;
}

/* Legacy feature strip is replaced by the one above — keep it out of the flow. */
.intro-section .hero-features { display: none !important; }

/* ==========================================================================
   3. SHARED SECTION FURNITURE
   Every section below the hero uses the same eyebrow + heading rhythm.
   ========================================================================== */

.intro-section,
.service-categories,
.approach-section,
.testimonial-section,
.team-section,
.pricing-tables,
.blog-section,
.cta-section,
.partner-section {
  position: relative;
}

/* eyebrow */
.section-title {
  display: inline-block;
  font-family: inherit !important;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jv-orange-500);
  margin-bottom: 14px;
  position: relative;
  padding-left: 30px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--jv-grad-orange);
  transform: translateY(-50%);
}

/* heading */
.section-summary {
  font-size: 40px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--jv-ink);
  margin: 0 0 26px !important;
  text-wrap: balance;
}

/* light neutral band so white sections don't all run together */
.jv-band-soft {
  background: linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 100%);
}

/* ==========================================================================
   4. INTRO SECTION
   ========================================================================== */

.intro-section .row {
  border-radius: var(--jv-radius-lg);
  overflow: hidden;
  box-shadow: var(--jv-shadow-md);
  background: var(--jv-navy-800);
  margin-left: 0;
  margin-right: 0;
}

.intro-txt {
  position: relative;
  background: var(--jv-grad-hero) !important;
  padding: 72px 56px !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* same orange glow motif as the hero, keeps the page feeling of a piece */
.intro-txt::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -120px;
  bottom: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 138, 46, .3) 0%, rgba(224, 138, 46, 0) 70%);
  filter: blur(50px);
  pointer-events: none;
}

.intro-txt > * { position: relative; z-index: 1; }

.intro-txt .section-title { color: var(--jv-orange-300); }
.intro-txt .section-title::before { background: var(--jv-orange-300); }

.intro-txt h2,
.intro-txt .section-summary {
  color: var(--jv-white) !important;
  font-size: 34px !important;
  margin-bottom: 32px !important;
}

/* the legacy square button becomes a brand pill */
.intro-txt a.intro-btn {
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 17px 34px !important;
  border-radius: var(--jv-radius-pill) !important;
  background: var(--jv-grad-orange) !important;
  color: var(--jv-white) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  box-shadow: var(--jv-shadow-orange);
  border: 0 !important;
  align-self: flex-start;
  transition: transform .28s var(--jv-ease), box-shadow .28s var(--jv-ease);
}

.intro-txt a.intro-btn::before,
.intro-txt a.intro-btn::after { display: none !important; }

.intro-txt a.intro-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(184, 65, 10, .48);
}

/* image panel — gradient fallback so a missing/slow image still reads as design */
.intro-bg {
  position: relative;
  min-height: 420px;
  background-color: var(--jv-navy-700);
  background-image: var(--jv-grad-blue);
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.intro-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(4, 27, 54, .5) 0%, rgba(4, 27, 54, .05) 60%);
}

/* restyle the pulsing play button into brand colours */
.video-play-button:before,
.video-play-button:after {
  background: var(--jv-orange-500) !important;
}

.video-play-button span {
  border-left-color: var(--jv-white) !important;
}

/* ==========================================================================
   5. SERVICES / SERVICE CATEGORIES
   ========================================================================== */

.service-categories {
  padding: 96px 0 74px;
  background: linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 70%);
}

/* centred section headings: eyebrow stacks above the h2, no leading dash */
.row.text-center .section-title {
  display: block;
  padding-left: 0;
  margin-left: auto;
  margin-right: auto;
}

.row.text-center .section-title::before { display: none; }

/* --- dark variant: 2x2 cards on the brand gradient --------------------- */

.service-categories.jv-services-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 108px 0 82px;
  background: var(--jv-grad-hero);
}

.jv-services__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.jv-services__glow--orange {
  width: 540px;
  height: 540px;
  left: -180px;
  top: -160px;
  background: radial-gradient(circle, rgba(224, 138, 46, .3) 0%, rgba(224, 138, 46, 0) 70%);
}

.jv-services__glow--blue {
  width: 520px;
  height: 520px;
  right: -180px;
  bottom: -200px;
  background: radial-gradient(circle, rgba(53, 160, 220, .28) 0%, rgba(53, 160, 220, 0) 70%);
}

.jv-services__grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(124, 198, 238, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 198, 238, .06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
}

.jv-services__inner { position: relative; z-index: 1; }

.jv-services-dark .section-title { color: var(--jv-orange-300) !important; }
.jv-services-dark .section-summary { color: var(--jv-white) !important; margin-bottom: 54px !important; }

.jv-services__row { margin-top: 0; }

/* two per row, generous cards */
.jv-services-dark .single-category {
  align-items: flex-start;
  gap: 0;
  padding: 40px 38px 36px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .035) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: var(--jv-radius-lg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 26px;
}

.jv-services-dark .single-category::before {
  background: radial-gradient(circle, rgba(224, 138, 46, .3) 0%, rgba(224, 138, 46, 0) 70%);
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
}

.jv-services-dark .single-category:hover {
  transform: translateY(-8px);
  border-color: rgba(240, 169, 78, .5) !important;
  box-shadow: 0 28px 56px rgba(2, 15, 32, .45);
}

/* icon tile */
.jv-services-dark .single-category .img-wrapper {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  margin-bottom: 26px !important;
  background: linear-gradient(140deg, rgba(53, 160, 220, .22) 0%, rgba(15, 92, 158, .18) 100%);
  border: 1px solid rgba(124, 198, 238, .22);
}

.jv-services-dark .single-category .img-wrapper i {
  font-size: 30px;
  line-height: 1;
  color: var(--jv-sky-200);
  transition: color .35s var(--jv-ease);
}

.jv-services-dark .single-category:hover .img-wrapper {
  background: var(--jv-grad-orange);
  border-color: transparent;
  transform: rotate(-6deg) scale(1.05);
}

.jv-services-dark .single-category:hover .img-wrapper i { color: #fff; }

.jv-services-dark .single-category .text h4 {
  color: var(--jv-white) !important;
  font-size: 23px !important;
  margin-bottom: 14px !important;
}

.jv-services-dark .single-category .text p {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin-bottom: 24px !important;
}

.jv-services-dark .single-category .text p .see-more { color: var(--jv-sky-200) !important; }

.jv-services-dark .single-category a.readmore {
  color: var(--jv-orange-300) !important;
  font-size: 15px !important;
}

.jv-services-dark .single-category:hover a.readmore { color: var(--jv-orange-400) !important; }

/* Equal-height cards regardless of copy length.
   Scoped away from .text-center, which is the section's heading row — making
   that a flex container puts the eyebrow and the h2 side by side. */
.service-categories .row:not(.text-center) > [class*="col-"],
.services-area .row:not(.text-center) > [class*="col-"] {
  display: flex;
}

.single-category {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 26px;
  padding: 38px 30px 34px !important;
  border: 1px solid rgba(11, 53, 96, .1) !important;
  border-radius: var(--jv-radius) !important;
  background: var(--jv-white);
  text-align: left !important;
  overflow: hidden;
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease),
              border-color .35s var(--jv-ease);
}

/* subtle brand wash that reveals on hover */
.single-category::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 138, 46, .16) 0%, rgba(224, 138, 46, 0) 70%);
  opacity: 0;
  transition: opacity .35s var(--jv-ease);
}

.single-category:hover {
  transform: translateY(-8px);
  border-color: rgba(224, 138, 46, .38) !important;
  box-shadow: 0 24px 48px rgba(4, 27, 54, .13);
}

.single-category:hover::before { opacity: 1; }

.single-category > * { position: relative; z-index: 1; }

/* icon chip — styled as a tile so a broken icon file still looks intentional */
.single-category .img-wrapper {
  width: 62px;
  height: 62px;
  margin: 0 0 22px !important;
  border-radius: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, rgba(15, 92, 158, .12) 0%, rgba(53, 160, 220, .1) 100%);
  transition: background .35s var(--jv-ease), transform .35s var(--jv-ease);
}

.single-category:hover .img-wrapper {
  background: var(--jv-grad-orange);
  transform: rotate(-6deg) scale(1.04);
}

.single-category .img-wrapper img {
  max-width: 32px;
  max-height: 32px;
  width: auto;
  height: auto;
  filter: none;
}

.single-category .text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.single-category .text h4 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--jv-ink) !important;
  text-transform: none !important;
  letter-spacing: -.01em;
  margin: 0 0 12px !important;
  line-height: 1.35;
}

.single-category .text p {
  color: var(--jv-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}

.single-category .text p .see-more {
  color: var(--jv-blue-500) !important;
  font-weight: 600;
}

.single-category a.readmore {
  display: inline-flex !important;
  align-self: flex-start;
  margin-top: auto;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--jv-orange-500) !important;
  text-transform: none !important;
  letter-spacing: 0;
  transition: gap .28s var(--jv-ease), color .28s var(--jv-ease);
}

.single-category a.readmore::after {
  content: "\2192";
  font-size: 15px;
  line-height: 1;
  transition: transform .28s var(--jv-ease);
}

.single-category:hover a.readmore { gap: 12px; color: var(--jv-orange-600) !important; }
.single-category:hover a.readmore::after { transform: translateX(2px); }

/* the non-category services variant gets the same treatment */
.services-area { padding-bottom: 100px !important; }

.services-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--jv-radius) !important;
  overflow: hidden;
  border: 1px solid rgba(11, 53, 96, .1);
  background: var(--jv-white);
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease);
}

.services-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(4, 27, 54, .13);
}

.services-thumb { overflow: hidden; }

.services-thumb img {
  width: 100%;
  transition: transform .6s var(--jv-ease);
}

.services-item:hover .services-thumb img { transform: scale(1.06); }

.services-content { padding: 28px 26px 30px !important; }

.services-content h4 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--jv-ink) !important;
  margin-bottom: 12px !important;
}

.services-content p {
  color: var(--jv-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   6. APPROACH / "HOW WE DO IT"
   ========================================================================== */

.approach-section {
  padding: 96px 0 100px;
  background: var(--jv-white);
}

.approach-summary { padding-right: 40px; }

.approach-summary a.boxed-btn,
a.boxed-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 17px 34px !important;
  border-radius: var(--jv-radius-pill) !important;
  background: var(--jv-grad-orange) !important;
  color: var(--jv-white) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  border: 0 !important;
  box-shadow: var(--jv-shadow-orange);
  transition: transform .28s var(--jv-ease), box-shadow .28s var(--jv-ease);
}

a.boxed-btn::before,
a.boxed-btn::after { display: none !important; }

a.boxed-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(184, 65, 10, .48);
  color: var(--jv-white) !important;
}

.approach-lists { margin: 0; padding: 0; list-style: none; }

.single-approach {
  display: flex !important;
  align-items: flex-start;
  gap: 22px;
  padding: 26px !important;
  margin-bottom: 18px !important;
  border-radius: var(--jv-radius);
  background: var(--jv-white);
  border: 1px solid rgba(11, 53, 96, .1);
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease),
              border-color .35s var(--jv-ease);
}

.single-approach:hover {
  transform: translateX(6px);
  border-color: rgba(224, 138, 46, .38);
  box-shadow: 0 18px 40px rgba(4, 27, 54, .1);
}

/* the legacy rules use float + a 110px left margin; the card is flex now */
.approach-text {
  margin-left: 0 !important;
  padding-left: 0 !important;
  min-width: 0;
}

.approach-icon-wrapper {
  flex: none;
  float: none !important;
  margin: 0 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center;
  background: linear-gradient(140deg, rgba(15, 92, 158, .12) 0%, rgba(53, 160, 220, .1) 100%) !important;
  border: 0 !important;
  transition: background .35s var(--jv-ease), transform .35s var(--jv-ease);
}

.approach-icon-wrapper i {
  font-size: 22px !important;
  color: var(--jv-blue-500) !important;
  transition: color .35s var(--jv-ease);
}

.single-approach:hover .approach-icon-wrapper {
  background: var(--jv-grad-orange) !important;
  transform: rotate(-6deg);
}

.single-approach:hover .approach-icon-wrapper i { color: #fff !important; }

.approach-text h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--jv-ink) !important;
  margin: 0 0 8px !important;
}

.approach-text p {
  color: var(--jv-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ==========================================================================
   7. STATISTICS
   ========================================================================== */

.statistics-section { position: relative; }

.statistics-section .statistic-overlay {
  background: var(--jv-grad-hero) !important;
  opacity: .92 !important;
}

.statistics-container { padding: 84px 0 !important; }

.statistics-section .round strong {
  color: var(--jv-white) !important;
  font-weight: 800 !important;
}

.statistics-section .round h5 {
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 600 !important;
}

.statistics-section .round h5 i { color: var(--jv-orange-300) !important; }

/* ==========================================================================
   8. PORTFOLIO / CASES
   ========================================================================== */

.case-section { padding: 96px 0 100px; background: var(--jv-white); }

.single-case {
  border-radius: var(--jv-radius) !important;
  overflow: hidden;
}

.single-case .outer-container {
  background: linear-gradient(0deg, rgba(4, 27, 54, .88) 0%, rgba(4, 27, 54, .12) 65%) !important;
}

.single-case h4 { font-weight: 700 !important; }

a.readmore-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 13px 26px !important;
  border-radius: var(--jv-radius-pill) !important;
  background: var(--jv-grad-orange) !important;
  color: var(--jv-white) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 0 !important;
  transition: transform .28s var(--jv-ease), box-shadow .28s var(--jv-ease);
}

a.readmore-btn::before,
a.readmore-btn::after { display: none !important; }

a.readmore-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--jv-shadow-orange);
  color: var(--jv-white) !important;
}

/* ==========================================================================
   9. TESTIMONIALS
   ========================================================================== */

.testimonial-section {
  padding: 96px 0 100px !important;
  background: linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 70%);
}

.single-testimonial {
  position: relative;
  margin: 20px 12px 30px !important;
  padding: 40px 32px 34px !important;
  border-radius: var(--jv-radius) !important;
  background: var(--jv-white) !important;
  border: 1px solid rgba(11, 53, 96, .1) !important;
  box-shadow: var(--jv-shadow-sm);
  text-align: left !important;
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease);
}

.single-testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(4, 27, 54, .13);
}

/* decorative quote mark instead of the old bitmap */
.single-testimonial::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 26px;
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: 1;
  color: rgba(224, 138, 46, .18);
  pointer-events: none;
}

.single-testimonial .img-wrapper {
  width: 62px !important;
  height: 62px !important;
  margin: 0 0 20px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 3px solid rgba(224, 138, 46, .3);
  background: rgba(15, 92, 158, .1);
}

.single-testimonial .img-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50% !important;
}

.single-testimonial .client-desc { text-align: left !important; }

.single-testimonial .comment {
  color: var(--jv-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-style: normal !important;
  margin-bottom: 22px !important;
}

.single-testimonial .name {
  font-family: inherit !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--jv-ink) !important;
  margin-bottom: 3px !important;
}

.single-testimonial .rank {
  font-size: 13px !important;
  color: var(--jv-orange-500) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* carousel dots, shared across every owl carousel on the page */
.owl-carousel .owl-dots { margin-top: 22px !important; }

.owl-carousel .owl-dot span {
  width: 9px !important;
  height: 9px !important;
  background: rgba(11, 53, 96, .22) !important;
  transition: width .3s var(--jv-ease), background .3s var(--jv-ease);
}

.owl-carousel .owl-dot.active span {
  width: 28px !important;
  border-radius: 5px !important;
  background: var(--jv-grad-orange) !important;
}

/* ==========================================================================
   10. TEAM
   ========================================================================== */

.team-section {
  padding: 96px 0 104px !important;
  background: #f6f9fc !important;
}

.team-section .team-overlay { display: none !important; }

.team-section .section-summary {
  max-width: 560px;
  margin: 14px auto 46px !important;
  color: var(--jv-ink) !important;
  font-size: 42px !important;
  line-height: 1.12 !important;
}
.team-section .section-title { color: var(--jv-orange-300) !important; }

.single-team-member {
  margin: 0 12px 20px !important;
  min-height: 334px;
  padding: 22px 18px 24px !important;
  border-radius: var(--jv-radius) !important;
  overflow: hidden;
  background: var(--jv-white) !important;
  border: 1px solid rgba(11, 53, 96, .1) !important;
  box-shadow: 0 16px 34px rgba(6, 45, 74, .08);
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease), border-color .35s var(--jv-ease);
}

.single-team-member:hover {
  transform: translateY(-6px);
  border-color: rgba(206, 101, 18, .3) !important;
  box-shadow: 0 22px 42px rgba(6, 45, 74, .12);
}

.team-img-wrapper {
  width: 154px !important;
  height: 154px !important;
  margin: 2px auto 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  background: transparent !important;
}

.team-img-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 5px solid #eef5fb;
  border-radius: 50% !important;
  transition: transform .6s var(--jv-ease);
}

.single-team-member:hover .team-img-wrapper img { transform: scale(1.04); }

.social-accounts {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.social-accounts ul,
.social-accounts .social-account-lists {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  text-align: center;
}

.single-team-member:hover .social-accounts {
  transform: none !important;
}

.social-accounts ul li {
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  margin: 0 !important;
  display: block !important;
}

.social-accounts ul li a,
.social-account-lists .single-social-account a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  line-height: 1 !important;
  background: #f4f8fb !important;
  color: var(--jv-blue-700) !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background .28s var(--jv-ease), color .28s var(--jv-ease);
}

.social-accounts ul li a i,
.social-account-lists .single-social-account a i {
  display: inline-block !important;
  color: currentColor !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.social-accounts ul li a:hover,
.social-account-lists .single-social-account a:hover {
  background: var(--jv-grad-orange) !important;
  color: var(--jv-white) !important;
  border-color: transparent !important;
}

.member-info {
  padding: 16px 8px 0 !important;
  text-align: center;
  background: var(--jv-white) !important;
}

.member-info .member-name {
  color: var(--jv-ink) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.member-info small {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 12px;
  color: var(--jv-blue-700) !important;
  background: rgba(11, 53, 96, .07);
  border-radius: var(--jv-radius) !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.6;
}

/* ==========================================================================
   11. PRICING / PLANS  — the money section
   ========================================================================== */

.pricing-tables {
  padding: 96px 0 104px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%);
}

.single-pricing-table {
  position: relative;
  display: flex !important;
  flex-direction: column;
  margin: 20px 12px 30px !important;
  padding: 38px 32px 36px !important;
  border-radius: var(--jv-radius-lg) !important;
  background: var(--jv-white) !important;
  border: 1px solid rgba(11, 53, 96, .12) !important;
  box-shadow: var(--jv-shadow-sm);
  text-align: left !important;
  overflow: hidden;
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease),
              border-color .35s var(--jv-ease);
}

/* brand bar across the top, fills in on hover */
.single-pricing-table::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--jv-grad-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--jv-ease);
}

.single-pricing-table:hover {
  transform: translateY(-10px);
  border-color: rgba(224, 138, 46, .4) !important;
  box-shadow: 0 28px 56px rgba(4, 27, 54, .16);
}

.single-pricing-table:hover::before { transform: scaleX(1); }

.single-pricing-table .title {
  display: inline-block;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jv-blue-500) !important;
  background: rgba(15, 92, 158, .09);
  padding: 7px 15px;
  border-radius: var(--jv-radius-pill);
  margin-bottom: 22px !important;
}

.single-pricing-table .price { margin-bottom: 8px !important; }

.single-pricing-table .price h1 {
  font-size: 46px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  color: var(--jv-ink) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

.single-pricing-table .features {
  flex: 1;
  padding: 24px 0 26px !important;
  margin: 20px 0 0 !important;
  border-top: 1px solid rgba(11, 53, 96, .1);
  color: var(--jv-body) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.single-pricing-table .features ul { padding-left: 0; list-style: none; margin: 0; }

.single-pricing-table .features ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}

.single-pricing-table .features ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--jv-grad-orange);
}

.single-pricing-table a.pricing-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  line-height: 1 !important;
  margin-top: auto;
  padding: 17px 26px !important;
  border-radius: var(--jv-radius-pill) !important;
  background: var(--jv-navy-700) !important;
  color: var(--jv-white) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 0 !important;
  transition: background .3s var(--jv-ease), transform .28s var(--jv-ease),
              box-shadow .28s var(--jv-ease);
}

.single-pricing-table a.pricing-btn::before,
.single-pricing-table a.pricing-btn::after { display: none !important; }

.single-pricing-table:hover a.pricing-btn {
  background: var(--jv-grad-orange) !important;
  transform: translateY(-2px);
  box-shadow: var(--jv-shadow-orange);
}

/* ==========================================================================
   12. BLOG
   ========================================================================== */

.blog-section {
  padding: 96px 0 100px !important;
  background: var(--jv-white);
}

.single-blog {
  display: flex !important;
  flex-direction: column;
  margin: 0 12px 26px !important;
  border-radius: var(--jv-radius) !important;
  overflow: hidden;
  background: var(--jv-white);
  border: 1px solid rgba(11, 53, 96, .1);
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease);
}

.single-blog:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(4, 27, 54, .13);
}

.blog-img-wrapper { overflow: hidden; }

.blog-img-wrapper img {
  width: 100%;
  transition: transform .6s var(--jv-ease);
}

.single-blog:hover .blog-img-wrapper img { transform: scale(1.06); }

.blog-txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px !important;
}

.blog-txt .date {
  font-size: 13px !important;
  color: var(--jv-body) !important;
  margin-bottom: 10px !important;
}

.blog-txt .date .username { color: var(--jv-orange-500) !important; font-weight: 600; }

.blog-txt .blog-title { margin-bottom: 10px !important; }

.blog-txt .blog-title a {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--jv-ink) !important;
  line-height: 1.4;
  transition: color .28s var(--jv-ease);
}

.blog-txt .blog-title a:hover { color: var(--jv-orange-500) !important; }

.blog-txt .blog-summary {
  color: var(--jv-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 22px !important;
}

.blog-txt a.readmore-btn { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   13. CALL TO ACTION
   ========================================================================== */

.cta-section { position: relative; }

.cta-section .cta-overlay {
  background: var(--jv-grad-hero) !important;
  opacity: .94 !important;
}

.cta-section .cta-content {
  position: relative;
  z-index: 2;
  padding: 64px 0 !important;
}

.cta-section .cta-content .row { align-items: center; }

.cta-section h3 {
  color: var(--jv-white) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.cta-section .contact-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ==========================================================================
   14. PARTNERS
   ========================================================================== */

.partner-section {
  padding: 72px 0 76px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%);
}

/* the theme's bare 2px rule is replaced by a hairline inside the container */
.partner-section .top-border {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* logo tiles: uniform boxes so mismatched logo shapes still line up */
.partner-section .single-partner-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 120px !important;
  margin: 0 10px;
  padding: 18px 22px;
  border-radius: var(--jv-radius);
  background: var(--jv-white);
  border: 1px solid rgba(11, 53, 96, .09);
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease),
              border-color .35s var(--jv-ease);
}

.partner-section .single-partner-item .outer-container,
.partner-section .single-partner-item .inner-container {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.partner-section .single-partner-item img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .35s var(--jv-ease), opacity .35s var(--jv-ease),
              transform .35s var(--jv-ease);
}

.partner-section .single-partner-item:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 138, 46, .38);
  box-shadow: 0 18px 38px rgba(4, 27, 54, .12);
}

.partner-section .single-partner-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

/* tiles whose logo file 404s are marked by the script in index.blade.php */
.partner-section .single-partner-item[data-jv-broken] { display: none !important; }

/* carousel arrows */
.owl-carousel.common-carousel.partner-carousel .owl-nav button.owl-next,
.owl-carousel.common-carousel.partner-carousel .owl-nav button.owl-prev {
  width: 36px !important;
  height: 36px !important;
  background: var(--jv-white) !important;
  border: 1px solid rgba(11, 53, 96, .12) !important;
  color: var(--jv-navy-700) !important;
  box-shadow: var(--jv-shadow-sm);
  transition: background .25s var(--jv-ease), color .25s var(--jv-ease),
              border-color .25s var(--jv-ease);
}

.owl-carousel.common-carousel.partner-carousel .owl-nav button.owl-next:hover,
.owl-carousel.common-carousel.partner-carousel .owl-nav button.owl-prev:hover {
  background: var(--jv-grad-orange) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ==========================================================================
   15. HEADER / NAV
   ========================================================================== */

.header-area.modern-header {
  background: rgba(255, 255, 255, .98) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(11, 53, 96, .08);
}

/* once the page scrolls the bar is fully opaque so content never bleeds through */
.header-area.modern-header.sticky-navbar,
.header-area.modern-header.sticky,
.header-area.modern-header.is-sticky,
.header-area.modern-header.stick {
  background: var(--jv-white) !important;
  /* opaque now, so the blur is redundant and only costs compositing */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 24px rgba(4, 27, 54, .1);
}

.header-area.modern-header.sticky-navbar .header-navbar,
.header-area.modern-header .header-navbar {
  background: transparent !important;
}

.support-bar-area {
  background: var(--jv-navy-800) !important;
  border: 0 !important;
}

.support-contact-info span,
.support-bar-area .language-btn,
.support-bar-area ul.login li a {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 14px !important;
  transition: color .25s var(--jv-ease);
}

.support-contact-info span i,
.support-bar-area .language-btn i { color: var(--jv-orange-300) !important; }

.support-bar-area ul.login li a:hover,
.support-bar-area .language-btn:hover { color: var(--jv-orange-300) !important; }

.support-bar-area ul.social-links li a {
  color: rgba(255, 255, 255, .62) !important;
  transition: color .25s var(--jv-ease), transform .25s var(--jv-ease);
  display: inline-block;
}

.support-bar-area ul.social-links li a:hover {
  color: var(--jv-orange-300) !important;
  transform: translateY(-2px);
}

.main-menu > li > a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--jv-ink) !important;
  transition: color .25s var(--jv-ease);
}

.main-menu > li > a:hover,
.main-menu > li > a.active,
.main-menu > li.active > a { color: var(--jv-orange-500) !important; }

/* the quote CTA in the nav */
.main-menu li a.quote-btn,
.header-navbar a.quote-btn,
.main-menu > li:last-child > a.quote-btn {
  border-radius: var(--jv-radius-pill) !important;
  background: var(--jv-grad-orange) !important;
  color: var(--jv-white) !important;
  box-shadow: var(--jv-shadow-orange);
  padding: 14px 28px !important;
  transition: transform .28s var(--jv-ease), box-shadow .28s var(--jv-ease);
}

.main-menu li a.quote-btn:hover {
  transform: translateY(-2px);
  color: var(--jv-white) !important;
  box-shadow: 0 16px 34px rgba(184, 65, 10, .45);
}

.main-menu .dropdown-lists,
.main-menu ul.dropdown-lists {
  border-radius: var(--jv-radius-sm) !important;
  border: 1px solid rgba(11, 53, 96, .1) !important;
  box-shadow: var(--jv-shadow-md) !important;
  padding: 10px !important;
}

.main-menu .dropdown-lists li a {
  border-radius: 6px;
  padding: 9px 12px !important;
  font-size: 14px !important;
  color: var(--jv-body) !important;
  transition: background .22s var(--jv-ease), color .22s var(--jv-ease);
}

.main-menu .dropdown-lists li a:hover {
  background: rgba(224, 138, 46, .1);
  color: var(--jv-orange-500) !important;
}

.header-area.modern-header .main-menu > li.dropdown {
  position: relative;
}

.header-area.modern-header .main-menu > li.dropdown::after {
  display: none !important;
  content: none !important;
}

.header-area.modern-header .main-menu > li.dropdown > a.dropdown-btn {
  position: relative;
  padding: 13px 34px 13px 16px !important;
  border-radius: var(--jv-radius-sm);
}

.header-area.modern-header .main-menu > li.dropdown:hover > a.dropdown-btn {
  color: var(--jv-orange-500) !important;
  background: rgba(224, 138, 46, .1);
}

.header-area.modern-header .main-menu > li.dropdown > a.dropdown-btn::after {
  content: "\f107";
  position: absolute;
  right: 14px;
  top: 50%;
  display: block;
  margin: 0;
  font-family: "Font Awesome 5 Free";
  font-size: 11px;
  font-weight: 900;
  color: currentColor;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-50%);
  transition: transform .22s var(--jv-ease);
}

.header-area.modern-header .main-menu > li.dropdown > a.dropdown-btn::before {
  display: none !important;
  content: none !important;
}

.header-area.modern-header .main-menu > li.dropdown:hover > a.dropdown-btn::after {
  transform: translateY(-50%) rotate(180deg);
}

.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists {
  top: calc(100% + 10px) !important;
  left: 0 !important;
  min-width: 230px;
  padding: 10px !important;
  overflow: hidden !important;
  background: #f7f9fc !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 34px rgba(10, 35, 64, .12) !important;
}

.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists::before {
  display: none !important;
  content: none !important;
}

.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists li {
  display: block;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: auto !important;
}

.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists li + li {
  margin-top: 2px !important;
}

.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists li a {
  display: block !important;
  min-height: auto;
  padding: 10px 12px !important;
  color: #17324d !important;
  background: transparent !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4;
}

.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists li a::before,
.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists li a::after {
  display: none !important;
  content: none !important;
}

.header-area.modern-header .main-menu > li.dropdown > ul.dropdown-lists li a:hover {
  color: var(--jv-orange-600) !important;
  background: rgba(224, 138, 46, .09) !important;
  transform: none;
}

.logo-wrapper img { max-height: 62px; width: auto; }

/* --- mobile drawer -----------------------------------------------------
   Theme bug: style.css has `.modern-header .main-menu { display: flex }`
   (specificity 0,2,0) which outranks responsive.css's `ul.main-menu
   { display: none }` (0,1,1) inside the max-width:991px query — so the
   desktop menu never actually hid on mobile. Everything below fixes that
   and restyles the slicknav drawer to match the redesign.
   ------------------------------------------------------------------- */

@media only screen and (max-width: 991px) {

  .header-area.modern-header .main-menu,
  .modern-header ul.main-menu {
    display: none !important;
  }

  .header-area.modern-header { padding: 0; }

  .header-navbar { padding: 14px 0 !important; }

  /* the theme's header container supplies no gutter, so the row's -15px
     bootstrap margins pushed the bar 15px past the viewport on both sides */
  .header-navbar > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .modern-header .logo-wrapper img,
  .logo-wrapper img { max-height: 44px !important; }

  #mobileMenu { display: block; }

  .slicknav_menu {
    display: flex !important;
    justify-content: flex-end;
    background: transparent !important;
    padding: 0 !important;
  }

  /* hamburger */
  .slicknav_btn {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--jv-radius-sm) !important;
    background: var(--jv-grad-orange) !important;
    border: 0 !important;
    box-shadow: 0 6px 16px rgba(184, 65, 10, .3);
    transition: transform .25s var(--jv-ease), box-shadow .25s var(--jv-ease);
  }

  .slicknav_btn:hover { transform: translateY(-1px); }

  .slicknav_menu .slicknav_menutxt { display: none !important; }

  .slicknav_menu .slicknav_icon {
    float: none !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 20px !important;
    height: auto !important;
    margin: 0 !important;
  }

  .slicknav_menu .slicknav_icon-bar {
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background: var(--jv-white) !important;
    box-shadow: none !important;
    transition: transform .28s var(--jv-ease), opacity .2s var(--jv-ease);
  }

  /* hamburger morphs into a close icon while the drawer is open */
  .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(2) { opacity: 0; }
  .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* drawer panel — anchored to the bottom of the header, not a magic px value */
  .modern-header ul.slicknav_nav,
  ul.slicknav_nav,
  .sticky-navbar ul.slicknav_nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 16px !important;
    background: var(--jv-grad-hero) !important;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 22px 44px rgba(4, 27, 54, .34);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .slicknav_nav li { border: 0 !important; }

  .modern-header .slicknav_nav a,
  .modern-header .slicknav_nav .slicknav_row,
  .slicknav_nav a,
  .slicknav_nav .slicknav_row {
    margin: 0 10px !important;
    padding: 13px 16px !important;
    border-radius: var(--jv-radius-sm) !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    background: transparent !important;
    transition: background .22s var(--jv-ease), color .22s var(--jv-ease);
  }

  .modern-header .slicknav_nav a:hover,
  .modern-header .slicknav_nav .slicknav_row:hover,
  .slicknav_nav a:hover,
  .slicknav_nav .slicknav_row:hover,
  .slicknav_nav .slicknav_row.slicknav_open {
    background: rgba(255, 255, 255, .09) !important;
    color: var(--jv-orange-300) !important;
  }

  /* slicknav wraps parent items as .slicknav_row > a, so both would take the
     padding above and those rows would sit indented from their siblings */
  .slicknav_nav .slicknav_row > a,
  .slicknav_nav .slicknav_row a.slicknav_item {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .slicknav_nav .slicknav_row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  /* nested submenus get an indent and a rule so hierarchy is readable */
  .slicknav_nav ul {
    margin: 2px 0 6px 22px !important;
    padding-left: 12px !important;
    border-left: 1px solid rgba(255, 255, 255, .14);
  }

  .slicknav_nav ul a {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    color: rgba(255, 255, 255, .66) !important;
  }

  .slicknav_nav .slicknav_arrow {
    float: none !important;
    margin: 0 !important;
    color: var(--jv-orange-300);
    font-size: 12px;
    transition: transform .25s var(--jv-ease);
  }

  .slicknav_nav .slicknav_row.slicknav_open .slicknav_arrow,
  .slicknav_nav a.slicknav_open .slicknav_arrow { transform: rotate(90deg); }

  /* mega-menu headings that only make sense on desktop */
  .slicknav_nav h5.service-title {
    color: var(--jv-sky-200) !important;
    font-size: 12px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 14px 0 4px 32px !important;
  }

  /* the quote CTA stays a real button inside the drawer */
  .modern-header ul.slicknav_nav li a.boxed-btn,
  ul.slicknav_nav li a.boxed-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 14px 20px 4px !important;
    padding: 15px 26px !important;
    border-radius: var(--jv-radius-pill) !important;
    background: var(--jv-grad-orange) !important;
    color: var(--jv-white) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    box-shadow: var(--jv-shadow-orange);
  }

  .modern-header ul.slicknav_nav li a.boxed-btn:hover,
  ul.slicknav_nav li a.boxed-btn:hover {
    background: var(--jv-grad-orange) !important;
    color: var(--jv-white) !important;
    filter: brightness(1.06);
  }
}

/* the top support bar hides below 992px, so drop the header's dark cap */
@media only screen and (max-width: 991px) {
  .support-bar-area { display: none !important; }
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.footer-section.modern-footer {
  background: var(--jv-grad-hero) !important;
  position: relative;
  overflow: hidden;
}

.footer-section.modern-footer::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 138, 46, .2) 0%, rgba(224, 138, 46, 0) 70%);
  filter: blur(70px);
  pointer-events: none;
}

.footer-section .container { position: relative; z-index: 1; }

.top-footer-section {
  padding: 76px 0 56px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

.footer-logo-wrapper img { max-height: 64px; width: auto; }

/* the logo is dark-on-white — give it a light plate so it stays legible on navy */
.modern-footer .footer-logo-wrapper {
  display: inline-block !important;
  padding: 12px 18px !important;
  border-radius: var(--jv-radius) !important;
  background: rgba(255, 255, 255, .94) !important;
  margin-bottom: 22px !important;
}

.footer-txt {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.footer-txt .see-more { color: var(--jv-orange-300) !important; }

.modern-footer h4 {
  color: var(--jv-white) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 22px !important;
  position: relative;
  padding-bottom: 12px;
}

.modern-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--jv-grad-orange);
}

.footer-links li a {
  color: rgba(255, 255, 255, .66) !important;
  font-size: 15px !important;
  line-height: 2.1 !important;
  transition: color .25s var(--jv-ease), padding-left .25s var(--jv-ease);
}

.footer-links li a:hover {
  color: var(--jv-orange-300) !important;
  padding-left: 6px;
}

.footer-newsletter p {
  color: rgba(255, 255, 255, .66) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: 16px !important;
}

.footer-newsletter input[type="email"] {
  width: 100%;
  padding: 14px 18px !important;
  border-radius: var(--jv-radius-sm) !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: var(--jv-white) !important;
  font-size: 14px !important;
  margin-bottom: 12px;
  transition: border-color .25s var(--jv-ease), background .25s var(--jv-ease);
}

.footer-newsletter input[type="email"]::placeholder { color: rgba(255, 255, 255, .4); }

.footer-newsletter input[type="email"]:focus {
  outline: none;
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(240, 169, 78, .6) !important;
}

.footer-newsletter button {
  width: 100%;
  padding: 14px 26px !important;
  border-radius: var(--jv-radius-pill) !important;
  background: var(--jv-grad-orange) !important;
  color: var(--jv-white) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 0 !important;
  cursor: pointer;
  transition: transform .28s var(--jv-ease), box-shadow .28s var(--jv-ease);
}

.footer-newsletter button:hover {
  transform: translateY(-2px);
  box-shadow: var(--jv-shadow-orange);
}

.footer-contact-info ul { padding: 0; list-style: none; margin: 0; }

.footer-contact-info ul li {
  display: flex !important;
  align-items: flex-start;
  gap: 13px;
  color: rgba(255, 255, 255, .68) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}

.footer-contact-info ul li i {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--jv-orange-300) !important;
  background: rgba(224, 138, 46, .13);
  margin: 0 !important;
}

.copyright-section {
  padding: 26px 0 !important;
  color: rgba(255, 255, 255, .52) !important;
  font-size: 14px !important;
  border: 0 !important;
}

.copyright-section a { color: var(--jv-orange-300) !important; }

/* back-to-top button */
.back-to-top {
  border-radius: 50% !important;
  background: var(--jv-grad-orange) !important;
  color: #fff !important;
  box-shadow: var(--jv-shadow-orange);
  border: 0 !important;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  .jv-hero__title { font-size: 52px; }
  .jv-isp-graphic { width: min(440px, 86vw); }
}

@media (max-width: 991px) {
  .jv-hero { padding-top: 108px; }
  .jv-hero__copy { padding: 24px 0 8px; max-width: 100%; text-align: center; margin: 0 auto; }
  .jv-hero__lede { margin-left: auto; margin-right: auto; }
  .jv-hero__actions,
  .jv-hero__proof { justify-content: center; }
  .jv-hero__visual { min-height: auto; padding: 42px 0 92px; }
  .jv-hero__title { font-size: 46px; }
  .jv-features { margin-top: -56px; }
  .jv-features__grid { grid-template-columns: repeat(2, 1fr); }
  .section-summary { font-size: 32px !important; }
  .intro-txt { padding: 54px 36px !important; }
  .intro-txt h2, .intro-txt .section-summary { font-size: 28px !important; }
  .intro-bg { min-height: 320px; }
  .service-categories { padding: 72px 0 76px; }
  .service-categories.jv-services-dark { padding: 76px 0 80px; }
  .jv-services-dark .single-category { padding: 32px 28px 30px !important; }
  .jv-services-dark .single-category .text h4 { font-size: 20px !important; }
  .approach-section,
  .case-section,
  .testimonial-section,
  .team-section,
  .pricing-tables,
  .blog-section { padding: 72px 0 76px !important; }
  .approach-summary { padding-right: 0; margin-bottom: 40px; }
  .cta-section h3 { font-size: 26px !important; text-align: center; margin-bottom: 26px !important; }
  .cta-section .contact-btn-wrapper { justify-content: center; }
  .cta-section .cta-content { padding: 52px 0 !important; }
  .top-footer-section { padding: 60px 0 42px !important; }
  .modern-footer h4 { margin-top: 34px !important; }
  .modern-footer-brand h4 { margin-top: 0 !important; }
  .intro-section { padding-top: 70px; }
}

@media (max-width: 767px) {
  .jv-hero { padding-top: 92px; }
  .jv-hero__title { font-size: 36px; }
  .jv-hero__lede { font-size: 16px; }
  .jv-hero__eyebrow { font-size: 11px; padding: 7px 15px 7px 11px; }
  .jv-btn { padding: 15px 26px; font-size: 14px; }
  .jv-hero__actions .jv-btn { flex: 1 1 100%; }
  .jv-hero__visual { min-height: 360px; padding: 22px 0 112px; }
  .jv-isp-graphic { width: min(350px, 88vw); }
  .jv-features { margin-top: -44px; }
  .intro-section { padding-top: 60px; }
  .jv-features__grid { grid-template-columns: 1fr; gap: 16px; }
  .jv-hero__grid { background-size: 40px 40px; }
  .section-summary { font-size: 27px !important; }
  .section-title { font-size: 12px !important; }
  .intro-txt { padding: 42px 26px !important; }
  .intro-txt h2, .intro-txt .section-summary { font-size: 24px !important; }
  .intro-bg { min-height: 240px; }
  .service-categories { padding: 58px 0 62px; }
  .service-categories.jv-services-dark { padding: 60px 0 64px; }
  .single-category { padding: 30px 24px 28px !important; }
  .jv-services-dark .single-category { padding: 28px 24px 26px !important; margin-bottom: 18px; }
  .jv-services-dark .single-category .img-wrapper { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 20px !important; }
  .jv-services-dark .single-category .img-wrapper i { font-size: 24px; }
  .jv-services-dark .single-category .text h4 { font-size: 19px !important; }
  .jv-services-dark .single-category .text p { font-size: 15px !important; }
  .jv-services-dark .section-summary { margin-bottom: 34px !important; }
  .jv-services__grid-lines { background-size: 44px 44px; }
  .approach-section,
  .case-section,
  .testimonial-section,
  .team-section,
  .pricing-tables,
  .blog-section { padding: 58px 0 62px !important; }
  .single-approach { padding: 22px !important; gap: 16px; }
  .approach-icon-wrapper { width: 48px !important; height: 48px !important; border-radius: 13px !important; }
  .approach-icon-wrapper i { font-size: 18px !important; }
  .single-testimonial { padding: 32px 24px 28px !important; margin: 16px 6px 24px !important; }
  .single-pricing-table { padding: 30px 24px 30px !important; margin: 16px 6px 24px !important; }
  .single-pricing-table .price h1 { font-size: 38px !important; }
  .cta-section h3 { font-size: 22px !important; }
  .statistics-container { padding: 60px 0 !important; }
  .partner-section { padding: 48px 0 52px !important; }
  .partner-section .single-partner-item { height: 96px !important; padding: 14px 18px; }
  .partner-section .single-partner-item img { max-height: 48px; }
}

@media (max-width: 400px) {
  .jv-hero__title { font-size: 31px; }
  .jv-isp-graphic { width: min(310px, 90vw); }
}

/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .jv-hero__glow--orange,
  .jv-hero__glow--blue,
  .jv-isp-graphic,
  .jv-isp-backbone i,
  .jv-isp-router span,
  .jv-isp-endpoint,
  .jv-isp-signal,
  .jv-isp-packet,
  .jv-hero__pulse,
  .jv-isp-router {
    animation: none !important;
  }
}

/* ========================================================================== 
   WHY CHOOSE JV DIGITAL
   ========================================================================== */

.jv-why-choose {
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  background:
    linear-gradient(120deg, rgba(15, 92, 158, .045), transparent 42%),
    #f7faff;
  isolation: isolate;
}

.jv-why-choose::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .45;
  background-image:
    linear-gradient(rgba(15, 92, 158, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 92, 158, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.jv-why-choose__glow {
  position: absolute;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.jv-why-choose__glow--blue {
  top: -220px;
  right: -120px;
  background: rgba(53, 160, 220, .2);
}

.jv-why-choose__glow--orange {
  bottom: -280px;
  left: -160px;
  background: rgba(224, 138, 46, .18);
}

.jv-why-choose__heading {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.jv-why-choose__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--jv-orange-600);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.jv-why-choose__label::before,
.jv-why-choose__label::after {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--jv-orange-400);
}

.jv-why-choose__heading h2 {
  margin: 0 0 16px;
  color: var(--jv-navy-900);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.jv-why-choose__heading h2 span {
  color: var(--jv-orange-500);
}

.jv-why-choose__heading p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--jv-body);
  font-size: 18px;
  line-height: 1.7;
}

.jv-why-choose__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.jv-benefit-card {
  position: relative;
  min-height: 220px;
  padding: 26px 24px 24px;
  overflow: hidden;
  border: 1px solid rgba(15, 92, 158, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px rgba(4, 27, 54, .07);
  transition: transform .35s var(--jv-ease), box-shadow .35s var(--jv-ease), border-color .35s var(--jv-ease);
}

.jv-benefit-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -56px;
  width: 130px;
  height: 130px;
  border: 18px solid rgba(53, 160, 220, .045);
  border-radius: 50%;
  transition: transform .4s var(--jv-ease);
}

.jv-benefit-card:hover {
  transform: translateY(-7px);
  border-color: rgba(15, 92, 158, .22);
  box-shadow: 0 20px 44px rgba(4, 27, 54, .13);
}

.jv-benefit-card:hover::after {
  transform: scale(1.18);
}

.jv-benefit-card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.jv-benefit-card__icon {
  display: inline-flex;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 28px;
  transition: transform .35s var(--jv-ease);
}

.jv-benefit-card:hover .jv-benefit-card__icon {
  transform: rotate(-5deg) scale(1.06);
}

.jv-benefit-card__icon--blue {
  color: var(--jv-blue-500);
  background: linear-gradient(145deg, #e8f5fd, #dbeeff);
}

.jv-benefit-card__icon--orange {
  color: var(--jv-orange-600);
  background: linear-gradient(145deg, #fff3e9, #ffe6d4);
}

.jv-benefit-card h3 {
  margin: 0;
  color: var(--jv-navy-900);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.jv-benefit-card > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #43556a;
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 1199px) {
  .jv-why-choose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jv-benefit-card { min-height: 200px; }
}

@media (max-width: 767px) {
  .jv-why-choose { padding: 68px 0 74px; }
  .jv-why-choose__heading { margin-bottom: 34px; }
  .jv-why-choose__heading p { font-size: 16px; }
  .jv-why-choose__grid { grid-template-columns: 1fr; gap: 14px; }
  .jv-benefit-card { min-height: auto; padding: 22px 20px; border-radius: 17px; }
  .jv-benefit-card__top { margin-bottom: 14px; }
  .jv-benefit-card__icon { flex-basis: 56px; width: 56px; height: 56px; font-size: 24px; }
  .jv-benefit-card h3 { font-size: 19px; }
}

/* ========================================================================== 
   COVERAGE MAP
   ========================================================================== */

.jv-coverage-map {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: linear-gradient(135deg, #041b36 0%, #082f58 58%, #0d4677 100%);
}

.jv-coverage-map::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -260px;
  top: -250px;
  border-radius: 50%;
  background: rgba(224, 138, 46, .14);
  filter: blur(70px);
}

.jv-coverage-map__content {
  position: relative;
  z-index: 2;
  padding-right: 24px;
}

.jv-coverage-map__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: var(--jv-orange-300);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.jv-coverage-map__label::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--jv-orange-400);
}

.jv-coverage-map__content h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.jv-coverage-map__content h2 span { color: var(--jv-orange-300); }

.jv-coverage-map__content > p {
  margin: 0 0 27px;
  color: rgba(255,255,255,.72);
  font-size: 17px;
  line-height: 1.7;
}

.jv-coverage-map__stats {
  display: flex;
  gap: 34px;
  margin-bottom: 30px;
}

.jv-coverage-map__stats div { display: flex; flex-direction: column; }
.jv-coverage-map__stats strong { color: #fff; font-size: 28px; line-height: 1; }
.jv-coverage-map__stats span { margin-top: 7px; color: rgba(255,255,255,.58); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

.jv-coverage-map__cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--jv-grad-orange);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: var(--jv-shadow-orange);
  transition: transform .3s var(--jv-ease), box-shadow .3s var(--jv-ease);
}

.jv-coverage-map__cta:hover { transform: translateY(-3px); box-shadow: 0 17px 35px rgba(184,65,10,.42); }

.jv-map-visual {
  position: relative;
  height: 470px;
  overflow: hidden;
  border: 1px solid rgba(124,198,238,.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 48% 48%, rgba(53,160,220,.2), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 32px 80px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.1);
}

.jv-map-visual__grid {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    linear-gradient(rgba(124,198,238,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,198,238,.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at center, #000 25%, transparent 82%);
}

.jv-map-visual::before,
.jv-map-visual::after {
  content: "";
  position: absolute;
  left: 48%;
  top: 48%;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(124,198,238,.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.jv-map-visual::after { width: 390px; height: 390px; opacity: .6; }
.jv-map-visual__routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.jv-map-route { fill: none; stroke-linecap: round; }
.jv-map-route--main { stroke: rgba(124,198,238,.28); stroke-width: 3; }
.jv-map-route--pulse { stroke: var(--jv-orange-300); stroke-width: 2; stroke-dasharray: 7 14; animation: jvMapFlow 10s linear infinite; filter: drop-shadow(0 0 6px rgba(240,169,78,.8)); }

@keyframes jvMapFlow { to { stroke-dashoffset: -210; } }

.jv-map-area {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  cursor: default;
  outline: none;
  transition: transform .3s var(--jv-ease);
}

.jv-map-area > i {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: var(--jv-blue-400);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 0 0 6px rgba(53,160,220,.1), 0 10px 26px rgba(0,0,0,.25);
}

.jv-map-area--garhwa > i { width: 58px; height: 58px; background: var(--jv-grad-orange); font-size: 20px; }
.jv-map-area__pulse { position: absolute; left: 5px; top: 5px; width: 32px; height: 32px; border: 2px solid var(--jv-sky-300); border-radius: 50%; animation: jvMapPulse 2.3s ease-out infinite; }
.jv-map-area--garhwa .jv-map-area__pulse { left: 7px; top: 7px; width: 44px; height: 44px; border-color: var(--jv-orange-300); }

@keyframes jvMapPulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.15); opacity: 0; } }

.jv-map-area div {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(4,27,54,.82);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
  transition: background .3s var(--jv-ease), border-color .3s var(--jv-ease);
}

.jv-map-area strong, .jv-map-area small { display: block; white-space: nowrap; }
.jv-map-area strong { font-size: 13px; line-height: 1.2; }
.jv-map-area small { margin-top: 3px; color: var(--jv-sky-200); font-size: 10px; }
.jv-map-area:hover, .jv-map-area:focus { z-index: 5; transform: translateY(-5px); }
.jv-map-area:hover div, .jv-map-area:focus div { border-color: rgba(240,169,78,.42); background: rgba(7,39,71,.96); }

.jv-map-area--garhwa { left: 43%; top: 41%; }
.jv-map-area--nagar { left: 12%; top: 17%; }
.jv-map-area--ranka { right: 6%; top: 18%; }
.jv-map-area--meral { left: 8%; bottom: 14%; }
.jv-map-area--palamu { right: 7%; bottom: 13%; }
.jv-map-area--bhawanathpur { left: 48%; top: 4%; }

.jv-map-visual__legend {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  letter-spacing: .04em;
}

.jv-map-visual__legend span { width: 20px; height: 2px; background: var(--jv-orange-300); box-shadow: 0 0 8px var(--jv-orange-300); }

@media (max-width: 991px) {
  .jv-coverage-map { padding: 78px 0; }
  .jv-coverage-map__content { max-width: 650px; margin-bottom: 42px; padding-right: 0; }
}

@media (max-width: 575px) {
  .jv-coverage-map { padding: 64px 0; }
  .jv-map-visual { height: 520px; border-radius: 22px; }
  .jv-map-visual__routes { display: none; }
  .jv-map-visual::before { width: 230px; height: 230px; }
  .jv-map-visual::after { width: 360px; height: 360px; }
  .jv-map-area { transform: scale(.9); transform-origin: left center; }
  .jv-map-area:hover, .jv-map-area:focus { transform: scale(.94) translateY(-4px); }
  .jv-map-area--garhwa { left: 24%; top: 41%; }
  .jv-map-area--nagar { left: 4%; top: 12%; }
  .jv-map-area--ranka { right: 2%; top: 25%; }
  .jv-map-area--meral { left: 3%; bottom: 16%; }
  .jv-map-area--palamu { right: 2%; bottom: 4%; }
  .jv-map-area--bhawanathpur { left: 34%; top: 3%; }
  .jv-map-visual__legend { display: none; }
}

.jv-btn:focus-visible,
.jv-feature:focus-visible {
  outline: 3px solid var(--jv-orange-300);
  outline-offset: 3px;
}

.loader-container {
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(245, 132, 32, 0.18), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(29, 92, 178, 0.16), transparent 35%),
    linear-gradient(135deg, #07162c 0%, #0d2e5a 58%, #123e76 100%) !important;
}

.loader-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.95), transparent 72%);
}

.loader-container .loader {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 112px !important;
  height: 112px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 10px, transparent 11px),
    conic-gradient(from 120deg, var(--jv-orange-400), var(--jv-blue-500), var(--jv-orange-400)) !important;
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, 0.055),
    0 0 42px rgba(245, 132, 32, 0.32),
    0 0 70px rgba(29, 92, 178, 0.26) !important;
  animation: jvLoaderSpin 1.45s linear infinite !important;
}

.loader-container .loader::before,
.loader-container .loader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.loader-container .loader::before {
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.85);
}

.loader-container .loader::after {
  inset: 43px;
  background: #ffffff;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.9);
}

.loader-container .loader-inner {
  position: absolute !important;
  width: 150px !important;
  height: 2px !important;
  inset: 55px auto auto 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent) !important;
  animation: jvFiberSweep 1.45s ease-in-out infinite !important;
}

.jv-loader__ring {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  animation: jvLoaderPulse 1.8s ease-out infinite;
}

.jv-loader__ring--two {
  inset: -28px;
  animation-delay: 0.45s;
}

.jv-loader__packet {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--jv-orange-300);
  box-shadow: 0 0 18px rgba(245, 132, 32, 0.9);
}

.jv-loader__packet--one {
  top: 8px;
  left: 50%;
}

.jv-loader__packet--two {
  right: 10px;
  bottom: 24px;
  background: #76b8ff;
  box-shadow: 0 0 18px rgba(118, 184, 255, 0.9);
}

.jv-loader__text {
  position: absolute;
  top: calc(50% + 92px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@keyframes jvLoaderSpin {
  to { transform: rotate(360deg); }
}

@keyframes jvFiberSweep {
  0%, 100% { opacity: 0.25; width: 90px; }
  50% { opacity: 1; width: 168px; }
}

@keyframes jvLoaderPulse {
  0% { opacity: 0.7; transform: scale(0.82); }
  100% { opacity: 0; transform: scale(1.22); }
}

.loader-container.loader-fadeout {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.loader-container.loader-fadeout .loader,
.loader-container.loader-fadeout .loader-inner,
.loader-container.loader-fadeout .jv-loader__ring,
.loader-container.loader-fadeout .jv-loader__packet {
  animation: none !important;
  opacity: 0 !important;
}

.jv-whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 1200;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff !important;
  font-size: 30px;
  text-decoration: none !important;
  box-shadow: 0 18px 38px rgba(18, 140, 126, 0.34);
  transition: transform 0.25s var(--jv-ease), box-shadow 0.25s var(--jv-ease);
}

.jv-whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(37, 211, 102, 0.2);
  animation: jvWhatsAppPulse 2.4s ease-out infinite;
}

.jv-whatsapp-float:hover,
.jv-whatsapp-float:focus {
  transform: translateY(-3px) scale(1.04);
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 22px 46px rgba(18, 140, 126, 0.42);
}

.jv-whatsapp-float::after {
  display: none !important;
}

@keyframes jvWhatsAppPulse {
  0% {
    opacity: 0.88;
    transform: scale(0.86);
  }
  100% {
    opacity: 0;
    transform: scale(1.36);
  }
}

.jv-availability-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 90px;
  background:
    radial-gradient(circle at 18% 20%, rgba(245, 132, 32, 0.2), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(29, 92, 178, 0.24), transparent 32%),
    linear-gradient(135deg, #07162c 0%, #0d2e5a 58%, #123e76 100%);
  color: #ffffff;
}

.jv-availability-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
}

.jv-availability-hero .container {
  position: relative;
  z-index: 1;
}

.jv-availability-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(245, 132, 32, 0.14);
  color: var(--jv-orange-300);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.jv-availability-hero h1 {
  max-width: 760px;
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  font-weight: 800;
}

.jv-availability-hero p {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.8;
}

.jv-availability-section {
  padding: 90px 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(245, 132, 32, 0.08), transparent 30%),
    #f6f8fc;
}

.jv-availability-card {
  position: relative;
  overflow: visible;
  padding: 34px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(7, 22, 44, 0.1);
}

.jv-availability-form {
  position: relative;
  z-index: 1;
}

.jv-availability-card--mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
}

.jv-availability-card--mini i {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--jv-orange-400), var(--jv-blue-500));
  color: #ffffff;
  font-size: 28px;
}

.jv-availability-card--mini strong {
  color: #ffffff;
  font-size: 22px;
}

.jv-availability-card--mini span {
  color: rgba(255, 255, 255, 0.72);
}

.jv-availability-form .form-element label {
  color: #10294b;
  font-weight: 800;
}

.jv-availability-form .form-element input,
.jv-availability-form .form-element select {
  width: 100%;
  height: 58px;
  border: 1px solid rgba(16, 41, 75, 0.1);
  border-radius: 16px;
  background: #f9fbff;
  color: #10294b;
  box-shadow: none;
  transition: border-color 0.2s var(--jv-ease), box-shadow 0.2s var(--jv-ease), background 0.2s var(--jv-ease);
}

.jv-availability-form .form-element input:focus,
.jv-availability-form .form-element select:focus {
  border-color: rgba(245, 132, 32, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(245, 132, 32, 0.11);
}

.jv-area-suggest {
  position: relative;
}

.jv-area-suggest__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: 286px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(7, 22, 44, 0.16);
}

.jv-area-suggest.is-open .jv-area-suggest__menu {
  display: block;
}

.jv-area-suggest__menu button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #10294b;
  text-align: left;
  font-weight: 800;
  transition: background 0.18s var(--jv-ease), color 0.18s var(--jv-ease);
}

.jv-area-suggest__menu button:hover,
.jv-area-suggest__menu button:focus {
  background: rgba(245, 132, 32, 0.1);
  color: var(--jv-orange-500);
}

.jv-area-suggest__menu button small {
  flex: 0 0 auto;
  color: #748399;
  font-size: 12px;
  font-weight: 700;
}

.jv-field-hint {
  display: block;
  margin-top: 9px;
  color: #748399;
  font-size: 13px;
  line-height: 1.5;
}

.jv-availability-submit {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--jv-orange-400), var(--jv-blue-500));
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(245, 132, 32, 0.24);
}

.jv-availability-result {
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
  padding: 18px;
  border-radius: 20px;
}

.jv-availability-result i {
  margin-top: 4px;
  font-size: 26px;
}

.jv-availability-result strong {
  display: block;
  margin-bottom: 4px;
  color: #10294b;
  font-size: 18px;
}

.jv-availability-result p {
  margin: 0;
  color: #5f6f83;
}

.jv-availability-result.is-available {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.jv-availability-result.is-unavailable {
  background: rgba(245, 132, 32, 0.13);
  color: var(--jv-orange-500);
}

.jv-coverage-card {
  height: 100%;
}

.jv-coverage-group + .jv-coverage-group {
  margin-top: 24px;
}

.jv-coverage-group h3 {
  margin: 0 0 13px;
  color: #10294b;
  font-size: 20px;
  font-weight: 800;
}

.jv-coverage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.jv-coverage-list span {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f5fb;
  color: #43546b;
  font-size: 13px;
  font-weight: 700;
}

.jv-service-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  border: 1px solid rgba(9, 31, 63, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(4, 22, 48, 0.09);
  transition: transform 0.24s var(--jv-ease), box-shadow 0.24s var(--jv-ease), border-color 0.24s var(--jv-ease);
}

.jv-services-dark .section-title {
  color: #07162c !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em;
}

.jv-services-dark .section-title::first-letter {
  color: #07162c;
}

.jv-services-dark .jv-heading-accent {
  color: var(--jv-orange-400);
}

.jv-services-dark .section-summary {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  color: #53657c !important;
  font-size: 16px !important;
}

.jv-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 132, 32, 0.18);
  box-shadow: 0 22px 54px rgba(4, 22, 48, 0.15);
}

.jv-service-card__content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 14px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.98) 78%, rgba(255, 255, 255, 0.9) 100%);
}

.jv-service-card__top {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.jv-service-card__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--jv-blue-500), #063766);
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 10px 22px rgba(29, 92, 178, 0.2);
}

.jv-service-card:nth-child(4n) .jv-service-card__icon,
.jv-service-card:nth-child(5n) .jv-service-card__icon {
  background: linear-gradient(135deg, var(--jv-orange-400), #ff4b1f);
}

.jv-service-card h4 {
  margin: 1px 0 5px;
  color: #07162c;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 900;
}

.jv-service-card p {
  margin: 0;
  color: #52657d;
  font-size: 12.5px;
  line-height: 1.38;
}

.jv-service-card__bullets {
  margin: 16px 0 13px;
  padding: 0;
  list-style: none;
}

.jv-service-card__bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #10294b;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}

.jv-service-card__bullets i {
  color: var(--jv-orange-400);
  font-size: 11px;
}

.jv-service-card__link {
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(245, 132, 32, 0.42);
  border-radius: 999px;
  background: #ffffff;
  color: var(--jv-orange-500) !important;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none !important;
}

.jv-service-card__image {
  position: relative;
  flex: 0 0 152px;
  height: 152px;
  margin-top: 0;
}

.jv-service-card__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(to top, rgba(4, 18, 38, 0.9) 0%, rgba(4, 18, 38, 0.1) 66%);
}

.jv-service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--jv-ease);
}

.jv-service-card:hover .jv-service-card__image img {
  transform: scale(1.04);
}

.jv-service-card__image strong {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.jv-service-card--cta {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 26px;
  border: 0;
  background:
    linear-gradient(to top, rgba(4, 18, 38, 0.35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(245, 132, 32, 0.35), transparent 35%),
    linear-gradient(145deg, #06152b 0%, #0d2e5a 100%);
}

.jv-service-card--cta span {
  width: 54px;
  height: 5px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--jv-orange-400);
}

.jv-service-card--cta h4 {
  color: #ffffff;
  font-size: 25px;
  line-height: 1.15;
}

.jv-service-card--cta p {
  margin: 12px 0 24px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
}

.jv-service-card__cta-btn,
.jv-service-card__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none !important;
}

.jv-service-card__cta-btn {
  background: linear-gradient(135deg, var(--jv-orange-400), #ff4b1f);
  color: #ffffff !important;
}

.jv-service-card__whatsapp {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #ffffff !important;
}

.jv-service-card__whatsapp i {
  color: #25d366;
}

@media (max-width: 991px) {
  .jv-service-card,
  .jv-service-card--cta {
    min-height: 400px;
  }

  .jv-service-card__content {
    min-height: 230px;
  }

  .jv-service-card__image {
    height: 170px;
  }

  .jv-availability-hero {
    padding: 130px 0 70px;
  }

  .jv-availability-card--mini {
    margin-top: 34px;
  }

  .jv-coverage-card {
    margin-top: 28px;
  }
}

@media (max-width: 575px) {
  .jv-services-dark .section-title {
    font-size: 34px !important;
  }

  .jv-service-card,
  .jv-service-card--cta {
    min-height: auto;
  }

  .jv-service-card__content {
    min-height: auto;
  }

  .jv-service-card__image {
    height: 185px;
  }

  .jv-availability-hero {
    padding: 118px 0 58px;
  }

  .jv-availability-section {
    padding: 58px 0;
  }

  .jv-availability-card {
    padding: 24px;
    border-radius: 22px;
  }

  .jv-availability-submit {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .jv-whatsapp-float {
    right: 16px;
    bottom: 84px;
    width: 54px;
    height: 54px;
    font-size: 28px;
  }
}