/* ============================================================================
   JOOOVE LIFE — case study theme. Soft pastel "sync with nature" aesthetic,
   scoped to .jcase so it doesn't affect the navy XHealth system.
   ============================================================================ */
.jcase {
  --j-body: #9cbd97;      /* 身 sage green */
  --j-mind: #d99a9e;      /* 心 dusty rose */
  --j-spirit: #86c2c4;    /* 靈 soft teal */
  --j-cream: #f6f3ea;     /* warm paper */
  --j-mint: #eef3e8;      /* pale mint tint */
  --j-ink: #5c6b58;       /* muted green-grey ink */
  --j-body-text: #6c7468;
  --j-script: "Brush Script MT", "Segoe Script", cursive;
  position: relative;
  overflow: hidden;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--j-body-text);
}
.jcase .wrap { position: relative; z-index: 1; }

/* floating decorative brand elements */
.jcase__float { position: absolute; z-index: 0; pointer-events: none; opacity: .5; width: 320px; }
.jcase__float.jf1 { top: 320px; right: -90px; }
.jcase__float.jf2 { top: 1400px; left: -110px; width: 380px; }
.jcase__float.jf3 { bottom: 900px; right: -100px; width: 360px; }

/* shared type */
.jcase .jeyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--j-body); margin: 0 0 16px; }
.jcase .jh2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.28; letter-spacing: -0.01em; color: var(--j-ink); margin: 0 0 22px; text-wrap: balance; }
.jcase .jlead { font-size: clamp(15px, 1vw, 17px); line-height: 1.7; color: var(--j-body-text); margin: 0; }
.jcase .jcase__p { font-size: clamp(15px, 1vw, 16.5px); line-height: 1.95; color: var(--j-body-text); margin: 0 0 18px; }
.jcase .jcase__p:last-child { margin-bottom: 0; }
.jcenter { text-align: center; max-width: 720px; margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem); }
.jscript { font-family: var(--j-script); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--j-spirit);
  font-weight: 400; margin: 0; letter-spacing: .01em; }
.jscript--lg { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }

.jsec { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.jsec--tint { background: var(--j-mint); }

/* ---- Hero ---- */
.jhero { background: linear-gradient(170deg, var(--j-cream) 0%, #fff 70%); padding-block: clamp(1.5rem,1rem + 2vw,2.5rem) clamp(3rem,2rem + 4vw,5rem); }
.jback { appearance: none; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--j-body-text); margin-bottom: calc(36px + 1.6rem); transition: color var(--dur-fast); }
.jback:hover { color: var(--j-body); }
.jback [data-lucide] { width: 16px; height: 16px; }
.jhero__inner { max-width: 820px; }
.jhero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.jchip { display: inline-flex; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 6px 14px; border-radius: 999px; color: #fff; background: var(--j-body); }
.jhero__year { font-family: var(--font-mono); font-size: 13px; color: var(--j-body-text); letter-spacing: .04em; }
.jhero__logo { height: clamp(54px, 7vw, 92px); width: auto; margin-bottom: 6px; }
.jhero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.16; letter-spacing: -0.02em; color: var(--j-ink); margin: 18px 0 0; text-wrap: balance; }
.jhero__sub { font-size: clamp(15px, 1vw, 17.5px); line-height: 1.8; color: var(--j-body-text); margin: 24px 0 0; max-width: 720px; }
.jhero__svc { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--j-spirit); margin: 26px 0 0; }

/* ---- Pillars ---- */
.jpillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.jpillar { background: #fff; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 18px 40px -22px rgba(92,107,88,.3);
  border: 1px solid rgba(92,107,88,.08); display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.jpillar:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -24px rgba(92,107,88,.4); }
.jpillar__art { aspect-ratio: 16 / 11; display: grid; place-items: center; overflow: hidden; position: relative; }
.jpillar__art::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: .78; }
.jpillar__art img { position: relative; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.jpillar__body { padding: 26px 28px 30px; }
.jpillar__zh { font-family: var(--font-zh); font-weight: 900; font-size: 40px; line-height: 1; display: block; }
.jpillar__en { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--j-ink); margin: 8px 0 10px; letter-spacing: .02em; }
.jpillar__desc { font-size: 14.5px; line-height: 1.7; color: var(--j-body-text); margin: 0; }

/* ---- Approach steps ---- */
.jsteps { display: flex; flex-direction: column; gap: 0; max-width: 900px; margin: 0 auto; }
.jstep { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 48px); padding: clamp(24px,3vw,40px) 0;
  border-top: 1px solid rgba(92,107,88,.16); }
.jstep:last-child { border-bottom: 1px solid rgba(92,107,88,.16); }
.jstep__n { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); color: var(--j-body); line-height: 1; opacity: .65; }
.jstep__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem,1rem + 0.6vw,1.45rem); color: var(--j-ink); margin: 0 0 12px; }
.jstep__d { font-size: 15px; line-height: 1.8; color: var(--j-body-text); margin: 0; max-width: 620px; }

/* ---- Logo / web gallery ---- */
.jgallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.jgcard { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 44px -24px rgba(92,107,88,.34);
  background: var(--j-cream); border: 1px solid rgba(92,107,88,.08); }
.jgcard img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.jgcard:hover img { transform: scale(1.04); }
.jgcard--0, .jgcard--3 { margin-top: 0; }
.jgcard--1, .jgcard--2 { margin-top: clamp(0px, 4vw, 56px); }

/* ---- Deliverables + result ---- */
.jresult { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.jlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.jlist li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--j-body-text); }
.jlist li [data-lucide] { width: 18px; height: 18px; flex: none; color: var(--j-body); margin-top: 1px; }
.jstats { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 32px; flex-wrap: wrap; }
.jstat { display: flex; flex-direction: column; gap: 6px; }
.jstat__num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); color: var(--j-spirit); line-height: 1; }
.jstat__num i { font-style: normal; color: var(--j-mind); }
.jstat__label { font-size: 13px; line-height: 1.5; color: var(--j-body-text); max-width: 180px; }

/* ---- CTA ---- */
.jcase .pb-gap { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.jcase .mt-gap { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.jcta { position: relative; background: linear-gradient(160deg, var(--j-mint) 0%, var(--j-cream) 100%); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); overflow: hidden; }
.jcta__el { position: absolute; width: 260px; opacity: .55; pointer-events: none; }
.jcta__el--1 { left: -70px; bottom: -40px; }
.jcta__el--2 { right: -60px; top: -50px; width: 220px; }
.jcta__inner { text-align: center; }
.jcta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem,1.2rem + 2vw,2.6rem); color: var(--j-ink); margin: 10px 0 28px; text-wrap: balance; }
.jbtn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans);
  font-weight: 600; font-size: 16px; color: #fff; background: var(--j-body); border: 0; height: 56px; padding: 0 30px;
  border-radius: 999px; box-shadow: 0 16px 32px -14px rgba(92,107,88,.55); transition: all var(--dur-base) var(--ease-out); }
.jbtn:hover { background: var(--j-ink); transform: translateY(-2px); }
.jbtn [data-lucide] { width: 18px; height: 18px; }

@media (max-width: 880px) {
  .jpillars { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .jgallery { grid-template-columns: 1fr; }
  .jgcard--1, .jgcard--2 { margin-top: 0; }
  .jresult { grid-template-columns: 1fr; gap: 40px; }
  .jcase__float { display: none; }
}