/* Home-only hooks. Shared layout and utility rules live in common.css. */
body[data-page="index"] canvas.hero-canvas{display:block}

/* Three-card desktop viewport with padded edges for the card shadows. */
#reviews.reviews-section{padding:88px 0 72px;background:#f5f7fa;overflow-x:clip;overflow-y:visible;--review-width:clamp(320px,29vw,410px)}
#reviews .reviews-heading{max-width:1280px;margin:auto;padding:0 24px;text-align:center}
#reviews .review-eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin:0 0 22px}
#reviews h2{font-size:clamp(32px,4vw,56px);line-height:1.12;font-weight:700;margin:0}
#reviews .review-draft-note{margin:12px 0 0}
#reviews .jj-carousel{width:calc(100% - 32px);max-width:1408px;margin:0 auto;overflow:visible}
#reviews .jj-carousel-viewport{box-sizing:border-box;width:100%;overflow-x:auto;overflow-y:hidden;padding:44px 24px 60px;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none;overscroll-behavior-x:contain;clip-path:none}
#reviews .is-initial [data-review-before]{visibility:hidden}
#reviews .jj-carousel-viewport::-webkit-scrollbar{display:none}
#reviews .jj-carousel-track{position:relative;display:flex;width:max-content;align-items:stretch;gap:32px;transform:none;transition:none}
#reviews .jj-carousel-slide{width:var(--review-width);flex:0 0 var(--review-width);padding:0;scroll-snap-align:start;scroll-snap-stop:normal}
#reviews .review-card{display:flex;flex-direction:column;height:100%;padding:22px;border:1px solid #e3e7ee;border-radius:18px;background:white;box-shadow:0 14px 30px -12px rgba(25,40,70,.2);transition:box-shadow .2s ease}
#reviews .review-card:hover{box-shadow:0 22px 38px -12px rgba(25,40,70,.29)}
#reviews .review-portrait{display:block;aspect-ratio:1.48;border-radius:10px;overflow:hidden;background:#e8ecf1}
#reviews .review-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
#reviews blockquote{flex:1;margin:24px 0 28px;font-size:16px;line-height:1.8;color:#48566c}
#reviews blockquote p{margin:0}
#reviews .review-author{border-top:1px solid #e5e9f0;padding-top:19px}
#reviews .review-author h3{font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.4;margin:0;color:#263351}
#reviews .review-author p{font-size:13px;line-height:1.5;margin:6px 0 0;color:#6b778b}
#reviews .jj-carousel-nav{margin:0;gap:22px;align-items:center}
#reviews .review-position{font-size:12px;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:#657186;min-width:58px;text-align:center}
@media(max-width:767px){
  #reviews.reviews-section{--review-width:80vw;padding:56px 0 48px}
  #reviews .jj-carousel{width:100%}
  #reviews .jj-carousel-viewport{padding-top:32px;padding-bottom:44px}
  #reviews .review-card{padding:18px;border-radius:15px}
  #reviews blockquote{font-size:14px;line-height:1.75;margin:20px 0 24px}
}

/* Give the home banner a restrained brand-blue cast while keeping the
   production footage and foreground copy clear. */
body[data-page="index"] .jj-unified-hero .jj-hero-bg::after{
  background:linear-gradient(100deg,rgba(42,51,94,.46) 0%,rgba(42,51,94,.28) 52%,rgba(74,90,168,.16) 100%)
}
body[data-page="index"] .jj-unified-hero .jj-hero-bg-a::after{
  background:linear-gradient(100deg,rgba(13,18,41,.62) 0%,rgba(20,27,55,.46) 52%,rgba(42,51,94,.32) 100%)
}

/* The quality/"Engineered for Hard-Tech Success" section uses the supplied
   factory photograph as its visual anchor. Keep a soft left-to-right veil so
   the white copy remains readable without hiding the building. */
body[data-page="index"] #quality{
  background-color:#0d1229;
  background-image:linear-gradient(90deg,rgba(13,18,41,.42) 0%,rgba(13,18,41,.24) 48%,rgba(13,18,41,.12) 100%),url("../images/company.jpg");background-image:linear-gradient(90deg,rgba(13,18,41,.42) 0%,rgba(13,18,41,.24) 48%,rgba(13,18,41,.12) 100%),image-set(url("../images/company.webp") type("image/webp"),url("../images/company.jpg") type("image/jpeg"));
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover
}
body[data-page="index"] #quality{
  background-image:linear-gradient(90deg,rgba(13,18,41,.42) 0%,rgba(13,18,41,.24) 48%,rgba(13,18,41,.12) 100%),url("../images/company.jpg");background-image:linear-gradient(90deg,rgba(13,18,41,.42) 0%,rgba(13,18,41,.24) 48%,rgba(13,18,41,.12) 100%),image-set(url("../images/company.webp") type("image/webp"),url("../images/company.jpg") type("image/jpeg"));
  background-position:center calc(50% + var(--quality-parallax,0px))
}
body[data-page="index"] #quality .content-quality-overlay{
  display:none;
  z-index:0;
  opacity:0
}
body[data-page="index"] #quality .content-quality-glow-top{
  display:none
}
body[data-page="index"] #quality .content-container{
  position:relative;
  z-index:1
}
body[data-page="index"] #quality .content-company-profile-panel{
  background:rgba(13,18,41,.78);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 24px 70px -34px rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px)
}
body[data-page="index"] #quality .content-capability-text{
  background:rgba(13,18,41,.78);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 18px 52px -30px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px)
}


.jj-video-modal[hidden]{display:none}
.jj-video-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(4,8,20,.82)
}
.jj-video-modal__dialog{
  position:relative;
  width:min(960px,100%);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;
  background:#0d1229;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.8)
}
.jj-video-modal__video{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  background:#050812;
  object-fit:contain
}
.jj-video-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  display:flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(13,18,41,.72);
  color:#fff;
  cursor:pointer
}
.jj-video-modal__close:hover,.jj-video-modal__close:focus-visible{
  background:#ff9000;
  border-color:#ff9000
}
body.jj-video-modal-open{overflow:hidden}
@media (max-width:767px){
  .jj-video-modal{padding:14px}
  .jj-video-modal__dialog{border-radius:12px}
}

/* Keep the About JIEJIA panel anchored to the bottom of the quality grid on
   desktop. Its natural content height leaves the upper part of the column
   open for a future background image or visual treatment. */
@media (min-width:1024px){
  body[data-page="index"] #quality .content-quality-layout{
    align-items:stretch
  }
  body[data-page="index"] #quality .content-quality-layout > .jj-motion:last-child{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
  }
  body[data-page="index"] #quality .content-quality-layout > .jj-motion:last-child .content-company-profile-panel{
    height:auto;
    box-sizing:border-box
  }
}

/* Services cards sit on the light first section after the hero. Keep their
   imagery in a fixed, calm frame and use a white content panel so headings and
   Learn More remain readable even before hover styles are applied. */
body[data-page="index"] .services-section .content-service-card{
  background:#fff;
  border-color:rgba(13,18,41,.12)
}
body[data-page="index"] .services-section .jj-motion{
  filter:none
}
body[data-page="index"] .services-section .content-service-card-body picture{
  display:block;
  flex:0 0 220px;
  height:220px;
  overflow:hidden;
  background:#161c3a
}
body[data-page="index"] .services-section .content-service-card-body picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.86) contrast(1.04)
}
body[data-page="index"] .services-section .content-service-card-copy{
  background:#fff;
  color:#2a335e
}
body[data-page="index"] .services-section .content-service-card-title{
  color:#2a335e
}
body[data-page="index"] .services-section .content-service-card-description{
  color:#64748b
}
body[data-page="index"] .services-section .content-service-card-link{
  color:#e87f00
}
body[data-page="index"] .services-section .content-service-card-icon{
  color:#2a335e
}
body[data-page="index"] .services-section .content-service-card:hover .content-service-card-title,
body[data-page="index"] .services-section .content-service-card:hover .content-service-card-description{
  color:inherit
}
body[data-page="index"] .services-section .content-service-card:hover .content-service-card-link{
  color:#e87f00
}
@media (max-width:767px){
  body[data-page="index"] .services-section .content-service-card-body picture{
    flex-basis:190px;
    height:190px
  }
}

/* Give the metrics block a clear editorial entry point without changing the
   existing generated grid classes used by the static template. */
body[data-page="index"] .home-stats-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding:0 0 24px;
  border-bottom:1px solid rgba(13,18,41,.1)
}
body[data-page="index"] .home-stats-heading span{
  color:#ff9000
}
body[data-page="index"] .home-stats-heading p{
  max-width:420px;
  margin:0;
  color:rgba(13,18,41,.58);
  font-size:14px;
  line-height:1.6;
  text-align:right
}
body[data-page="index"] #about .content-stat-value{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;
  white-space:nowrap
}
@media (max-width:767px){
  body[data-page="index"] #quality{
    background-position:70% center
  }
  body[data-page="index"] .home-stats-heading{
    display:block;
    padding-bottom:16px
  }
  body[data-page="index"] .home-stats-heading p{
    margin-top:8px;
    text-align:left
  }
}

/* The second line of the home hero uses a light gradient.  Keeping this in a
   named hook prevents the generated utility bundle from overriding it. */
.hero-title__gradient{
  background:linear-gradient(120deg,#8fa2ff,#fff 50%,#8fa2ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-title__gradient > span > span{
  background:linear-gradient(120deg,#8fa2ff,#fff 50%,#8fa2ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}