/* ==========================================================================
   JUJCO unique detail pages + learn-more popup
   Themes follow the work: heat, cool, hybrid, air, urgent, gold, slate
   ========================================================================== */

:root {
  --jtheme: #0033A0;
  --jtheme-ink: #001D3A;
  --jtheme-soft: rgba(0, 51, 160, 0.08);
  --jtheme-grad: linear-gradient(135deg, #0033A0 0%, #001D3A 100%);
}

.jtheme--heat {
  --jtheme: #EF1B1D;
  --jtheme-ink: #6b0d12;
  --jtheme-soft: rgba(239, 27, 29, 0.08);
  --jtheme-grad: linear-gradient(135deg, #8B1530 0%, #EF1B1D 48%, #FFC726 100%);
}

.jtheme--cool {
  --jtheme: #1a7dff;
  --jtheme-ink: #0033A0;
  --jtheme-soft: rgba(26, 125, 255, 0.1);
  --jtheme-grad: linear-gradient(135deg, #001D3A 0%, #0033A0 55%, #1a7dff 100%);
}

.jtheme--hybrid {
  --jtheme: #0033A0;
  --jtheme-ink: #001D3A;
  --jtheme-soft: rgba(0, 51, 160, 0.08);
  --jtheme-grad: linear-gradient(120deg, #0033A0 0%, #1a7dff 40%, #EF1B1D 78%, #FFC726 100%);
}

.jtheme--air {
  --jtheme: #0e8f86;
  --jtheme-ink: #0a3d45;
  --jtheme-soft: rgba(14, 143, 134, 0.1);
  --jtheme-grad: linear-gradient(135deg, #0a3d45 0%, #0e8f86 58%, #7ec8ff 100%);
}

.jtheme--urgent {
  --jtheme: #EF1B1D;
  --jtheme-ink: #3b0508;
  --jtheme-soft: rgba(239, 27, 29, 0.12);
  --jtheme-grad: linear-gradient(135deg, #3b0508 0%, #EF1B1D 70%, #ff7a1a 100%);
}

.jtheme--gold {
  --jtheme: #c48a00;
  --jtheme-ink: #001D3A;
  --jtheme-soft: rgba(255, 199, 38, 0.16);
  --jtheme-grad: linear-gradient(135deg, #001D3A 0%, #0033A0 46%, #FFC726 100%);
}

.jtheme--about {
  --jtheme: #0033A0;
  --jtheme-ink: #001D3A;
  --jtheme-soft: rgba(0, 51, 160, 0.08);
  --jtheme-grad: linear-gradient(135deg, #001D3A 0%, #0033A0 55%, #FFC726 100%);
}

.jtheme--contact {
  --jtheme: #EF1B1D;
  --jtheme-ink: #001D3A;
  --jtheme-soft: rgba(239, 27, 29, 0.08);
  --jtheme-grad: linear-gradient(135deg, #0033A0 0%, #001D3A 48%, #EF1B1D 100%);
}

.jtheme--slate {
  --jtheme: #3d4f66;
  --jtheme-ink: #1A202C;
  --jtheme-soft: rgba(61, 79, 102, 0.1);
  --jtheme-grad: linear-gradient(135deg, #1A202C 0%, #3d4f66 60%, #718096 100%);
}

/* ----- Themed page heading ----- */
.jdetail-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--jtheme-grad);
  background-size: cover;
  background-position: center;
}

.jdetail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 12, 28, 0.28) 0%, rgba(0, 12, 28, 0.62) 100%),
    var(--jtheme-grad);
  mix-blend-mode: multiply;
  opacity: 0.72;
  pointer-events: none;
}

.jtheme--urgent .jdetail-hero::before {
  opacity: 0.78;
}

.jdetail-hero__in {
  position: relative;
  z-index: 1;
  padding: 72px 16px 56px;
  max-width: 820px;
}

.jdetail-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #001D3A;
  background: #FFC726;
}

.jtheme--urgent .jdetail-badge {
  background: #fff;
  color: #EF1B1D;
}

.jtheme--cool .jdetail-badge {
  background: #cfe8ff;
  color: #0033A0;
}

.jtheme--air .jdetail-badge {
  background: #d4f4f1;
  color: #0a3d45;
}

.jdetail-hero h1 {
  color: #fff;
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.12;
  font-weight: 800;
}

.jdetail-hero .breadcrumb,
.jdetail-hero .breadcrumb-item,
.jdetail-hero .breadcrumb-item.active,
.jdetail-hero .breadcrumb-item+.breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.86);
}

.jdetail-lede {
  margin: 10px auto 0;
  max-width: 38em;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.55;
}

/* ----- Detail body ----- */
.jdetail {
  padding: 72px 0 40px;
}

.jdetail-story img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 28px;
}

.jdetail-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jtheme);
  margin-bottom: 8px;
}

.jdetail h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom: 16px;
}

.jdetail-story p {
  font-size: 16.5px;
  line-height: 1.7;
}

.jdetail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 8px;
}

.jdetail-fact {
  background: var(--jtheme-soft);
  border-left: 4px solid var(--jtheme);
  border-radius: 10px;
  padding: 14px 16px;
}

.jdetail-fact strong {
  display: block;
  color: var(--jtheme-ink);
  font-family: var(--heading-font);
  font-size: 15px;
  margin-bottom: 2px;
}

.jdetail-fact span {
  font-size: 14px;
  color: var(--body-color);
}

.jdetail-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 36px;
}

.jdetail-step {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 8px 24px rgba(0, 29, 58, 0.05);
}

.jdetail-step__n {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--jtheme);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
}

.jdetail-step h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.jdetail-step p {
  margin: 0;
  font-size: 14.5px;
}

.jdetail-include {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 8px 0 36px;
  padding: 0;
  list-style: none;
}

.jdetail-include li {
  position: relative;
  padding: 10px 10px 10px 34px;
  background: var(--jtheme-soft);
  border-radius: 10px;
  font-weight: 600;
  color: var(--jtheme-ink);
  font-size: 14.5px;
}

.jdetail-include li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jtheme);
}

.jdetail-when {
  background: #001D3A;
  color: #fff;
  border-radius: 16px;
  padding: 26px 28px;
  margin: 8px 0 36px;
}

.jdetail-when h3 {
  color: #fff;
  margin-bottom: 12px;
}

.jdetail-when ul {
  margin: 0;
  padding-left: 18px;
}

.jdetail-when li {
  margin-bottom: 8px;
}

.jtheme--urgent .jdetail-when {
  background: #3b0508;
}

.jtheme--cool .jdetail-when {
  background: #00257a;
}

.jtheme--air .jdetail-when {
  background: #0a3d45;
}

.jdetail-side .cs_sidebar_widget {
  border-top: 4px solid var(--jtheme);
}

.jdetail-side .cs_category_widget a.is-current {
  color: var(--jtheme);
  font-weight: 800;
}

.jdetail-side .cs_footer_menu_2 li::before {
  background-color: var(--jtheme);
}

.jdetail-callout {
  background: var(--jtheme-grad);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.jdetail-callout h3 {
  color: #fff;
}

.jdetail-callout p {
  color: rgba(255, 255, 255, .9);
}

.jdetail-callout a {
  display: block;
  margin-top: 8px;
  color: #FFC726;
  font-weight: 800;
}

/* Project extras */
.jproject-meta {
  background: var(--jtheme-soft);
  border-radius: 16px;
  padding: 22px;
}

.jproject-meta li {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.jproject-meta li:last-child {
  border-bottom: 0;
}

.jproject-meta p {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.jproject-meta h3 {
  margin: 2px 0 0;
  font-size: 16px;
}

/* Team role pages */
.jteam-role {
  display: inline-block;
  color: var(--jtheme);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Blog article */
.jblog-article h1,
.jblog-article h2 {
  color: var(--jtheme-ink);
}

.jblog-article .jblog-meta {
  font-size: 14px;
  color: var(--ternary);
  margin-bottom: 22px;
}

/* ----- Learn-more popup ----- */
.jpop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.jpop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.jpop__mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 12, 28, 0.62);
}

.jpop__panel {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 12, 28, 0.35);
  transform: translateY(16px);
  transition: transform .22s ease;
}

.jpop.is-open .jpop__panel {
  transform: none;
}

.jpop__head {
  padding: 26px 28px 18px;
  background: var(--jtheme-grad);
  color: #fff;
  border-radius: 20px 20px 0 0;
}

.jpop__head h2 {
  color: #fff;
  margin: 8px 0 6px;
  font-size: 28px;
}

.jpop__head p {
  margin: 0;
  color: rgba(255, 255, 255, .92);
}

.jpop__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.jpop__close:hover {
  background: rgba(255, 255, 255, .28);
}

.jpop__body {
  padding: 22px 28px 8px;
}

.jpop__body h3 {
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jtheme);
  margin: 16px 0 8px;
}

.jpop__body ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.jpop__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 28px 26px;
}

.jpop__foot .cs_btn {
  margin: 0;
}

body.jpop-lock {
  overflow: hidden;
}

@media (max-width: 767px) {

  .jdetail-facts,
  .jdetail-steps,
  .jdetail-include {
    grid-template-columns: 1fr;
  }

  .jdetail-story img {
    height: 220px;
  }

  .jpop__head,
  .jpop__body,
  .jpop__foot {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   Type scale + breadcrumb fix + listing pages + motion
   ========================================================================== */

/* Never show raw hrefs beside links (preview / print / UA hacks) */
.jcrumbs a::after,
.jcrumbs a::before,
.breadcrumb a::after,
.jdetail-hero a::after,
.cs_page_heading a::after,
.jpage-hero a::after {
  content: none !important;
  display: none !important;
}

.jcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.jcrumbs a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.jcrumbs a:hover {
  color: #FFC726;
  border-color: #FFC726;
}

.jcrumbs__sep {
  opacity: 0.45;
  font-weight: 400;
}

.jcrumbs__now {
  color: #FFC726;
}

/* Tighter, editorial type on unique pages */
.jtheme .jdetail-hero h1,
.jtheme .jpage-hero h1 {
  font-size: clamp(26px, 3.5vw, 40px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.jtheme .jdetail-lede,
.jtheme .jpage-hero .jdetail-lede {
  font-size: 15.5px !important;
  line-height: 1.6;
  max-width: 42em;
}

.jtheme .jdetail h2 {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  line-height: 1.28 !important;
  margin-bottom: 12px;
}

.jtheme .jdetail h3,
.jtheme .jdetail-step h3 {
  font-size: 17px !important;
}

.jtheme .jdetail-story p,
.jtheme .jdetail p,
.jtheme .jprose p {
  font-size: 16px !important;
  line-height: 1.7;
}

.jtheme .jdetail-kicker,
.jtheme .jdetail-badge {
  font-size: 11px !important;
  letter-spacing: 0.16em;
}

.jtheme .jdetail-include li,
.jtheme .jdetail-step p,
.jtheme .jdetail-fact span {
  font-size: 14.5px !important;
}

.jtheme .cs_fs_64 {
  font-size: clamp(26px, 3.5vw, 40px) !important;
}

.jtheme .cs_fs_48 {
  font-size: clamp(22px, 2.5vw, 30px) !important;
}

/* Morphing heat / cool orbs */
.jmorph {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.jmorph__orb {
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(8px);
  opacity: 0.42;
  animation: jmorphSpin 18s ease-in-out infinite;
}

.jmorph__orb--cool {
  right: -12%;
  top: -18%;
  background: radial-gradient(circle, rgba(26, 125, 255, 0.75) 0%, transparent 68%);
}

.jmorph__orb--heat {
  left: -16%;
  bottom: -22%;
  background: radial-gradient(circle, rgba(239, 27, 29, 0.7) 0%, rgba(255, 199, 38, 0.25) 46%, transparent 70%);
  animation-duration: 22s;
  animation-direction: reverse;
}

@keyframes jmorphSpin {
  0% {
    transform: rotate(0deg) scale(1);
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  }

  50% {
    transform: rotate(180deg) scale(1.08);
    border-radius: 63% 37% 42% 58% / 56% 41% 59% 44%;
  }

  100% {
    transform: rotate(360deg) scale(1);
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  }
}

.jdetail-hero,
.jpage-hero {
  isolation: isolate;
}

/* Scroll rise */
[data-rise],
.jdetail-step,
.jdetail-fact,
.j3d,
.jstat,
.jrole,
.jcase,
.jarticle {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: var(--rise-delay, 0ms);
}

[data-rise].is-up,
.jdetail-step.is-up,
.jdetail-fact.is-up,
.j3d.is-up,
.jstat.is-up,
.jrole.is-up,
.jcase.is-up,
.jarticle.is-up {
  opacity: 1;
  transform: none;
}

/* Stats */
.jstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 8px;
}

.jstat {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 29, 58, 0.06);
}

.jstat strong {
  display: block;
  font-family: var(--heading-font);
  font-size: clamp(28px, 4vw, 40px);
  color: var(--jtheme);
  line-height: 1;
}

.jstat span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body-color);
}

/* About / listing story */
.jstory {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding: 72px 0 40px;
}

.jstory img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 24px 50px rgba(0, 29, 58, 0.16);
}

.jtimeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 40px;
}

.jtime {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px;
  border: 1px solid #e8eef5;
}

.jtime__n {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jtheme);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Contact board */
.jphones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 28px;
}

.jphone {
  display: block;
  padding: 22px 22px 18px;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background: var(--jtheme-grad);
  min-height: 140px;
}

.jphone:hover {
  color: #fff;
  transform: translateY(-3px);
}

.jphone small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}

.jphone strong {
  display: block;
  font-family: var(--heading-font);
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
}

.jphone--emer {
  background: linear-gradient(135deg, #3b0508, #EF1B1D 70%, #ff7a1a);
}

.jform-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 20px 50px rgba(0, 29, 58, 0.1);
  border: 1px solid #e8eef5;
}

/* Role / case / article cards */
.jroles,
.jcases,
.jarticles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.jrole,
.jcase,
.jarticle {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8eef5;
  box-shadow: 0 10px 28px rgba(0, 29, 58, 0.06);
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.jrole:hover,
.jcase:hover,
.jarticle:hover {
  color: inherit;
}

.jrole img,
.jcase img,
.jarticle img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.jrole__in,
.jcase__in,
.jarticle__in {
  padding: 16px 16px 18px;
}

.jrole h3,
.jcase h3,
.jarticle h3 {
  font-size: 18px;
  margin: 0 0 6px;
}

.jrole p,
.jcase p,
.jarticle p {
  margin: 0;
  font-size: 14px;
  color: var(--body-color);
}

.jmap-wrap {
  height: 420px;
  border-radius: 0;
  overflow: hidden;
}

.jmap-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.jprose {
  max-width: 720px;
}

.jprose h3 {
  margin-top: 28px;
}

@media (max-width: 991px) {

  .jstory,
  .jstats,
  .jtimeline,
  .jphones {
    grid-template-columns: 1fr 1fr;
  }

  .jroles,
  .jcases,
  .jarticles {
    grid-template-columns: 1fr 1fr;
  }

  .jstory img {
    height: 280px;
  }
}

@media (max-width: 575px) {

  .jstats,
  .jtimeline,
  .jphones,
  .jroles,
  .jcases,
  .jarticles {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jmorph__orb {
    animation: none !important;
  }

  [data-rise],
  .jdetail-step,
  .jdetail-fact,
  .j3d,
  .jstat,
  .jrole,
  .jcase,
  .jarticle {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Home 1 redesign
   ========================================================================== */
.jhome .cs_hero.cs_style_1 {
  overflow: hidden;
}

.jhome .cs_hero.cs_style_1 .jmorph {
  z-index: 0;
}

.jhome .cs_hero.cs_style_1 .container {
  position: relative;
  z-index: 2;
}

.jhome .cs_hero.cs_style_1 .cs_hero_img {
  z-index: 1;
}

.jhome .cs_hero_title {
  font-size: clamp(32px, 4.8vw, 54px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em;
  max-width: 13ch;
  font-weight: 800;
}

.jhome .cs_hero_mini_title {
  font-size: 13px !important;
  letter-spacing: 0.28em;
}

.jhome .cs_hero_subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 36em;
}

.jhome-about {
  padding: 80px 0 40px;
}

.jhome-about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.jhome-about__photo {
  position: relative;
}

.jhome-about__photo img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 20px;
}

.jhome-about__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.jhome-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 22px;
}

.jhome-phones small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ternary);
  margin-bottom: 2px;
}

.jhome-phones a {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 20px;
  color: var(--heading-color);
}

.jhome-phones a.emer {
  color: var(--accent);
}

.jhome-cta .cs_btn {
  margin: 6px;
}

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

.jhome-why__item {
  background: #fff;
  border-radius: 16px;
  padding: 22px 18px;
  border: 1px solid #e8eef5;
  box-shadow: 0 10px 28px rgba(0, 29, 58, 0.06);
}

.jhome-why__item h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.jhome-why__item p {
  margin: 0;
  font-size: 14.5px;
}

.jhome-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.jhome-quote {
  background: #fff;
  border-radius: 16px;
  padding: 24px 22px;
  border: 1px solid #e8eef5;
  box-shadow: 0 10px 28px rgba(0, 29, 58, 0.06);
}

.jhome-quote p {
  font-size: 15.5px;
  line-height: 1.65;
}

.jhome-quote strong {
  display: block;
  margin-top: 14px;
  font-size: 15px;
}

.jhome-quote span {
  font-size: 13px;
  color: var(--ternary);
}

.jhome-faq {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}

.jhome-faq img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 20px;
}

.jhome-cta {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 48px 40px;
  background: linear-gradient(120deg, #001D3A 0%, #0033A0 48%, #EF1B1D 100%);
  color: #fff;
  text-align: center;
}

.jhome-cta h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
}

.jhome-cta p {
  color: rgba(255, 255, 255, .9);
  max-width: 36em;
  margin: 0 auto 22px;
}

@media (max-width: 991px) {

  .jhome-about__grid,
  .jhome-faq {
    grid-template-columns: 1fr;
  }

  .jhome-why,
  .jhome-quotes {
    grid-template-columns: 1fr 1fr;
  }

  .jhome-about__photo img,
  .jhome-faq img {
    height: 280px;
  }
}

@media (max-width: 575px) {

  .jhome-why,
  .jhome-quotes {
    grid-template-columns: 1fr;
  }
}

.cs_team_member.cs_style_1 .cs_member_social_btns a.cs_member_social_item {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}