/* ============================================================
   JCS BPO — "Our Work" page-specific styles
   Builds on style.css (shared tokens, header, footer, hero,
   reveal system). Adds case-study, industries & trust layouts.
   ============================================================ */

/* ---- Hero copy tuning (left-aligned, two paragraphs) ---- */
.work-hero .hero-copy{max-width:680px}
.work-hero .hero-copy h1{font-size:clamp(2.3rem,4.6vw,4rem)}
.work-hero .hero-copy p.sub{max-width:620px}
.work-hero .hero-copy p.sub + p.sub{margin-top:-1.2rem;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--muted)}

/* ============ Hero — artistic background + glassy figure ============ */
.work-hero{position:relative;overflow:hidden}
.work-hero .hero-art{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 120% at 86% 12%, color-mix(in srgb,var(--primary) 30%, transparent), transparent 55%),
    radial-gradient(95% 95% at 8% 92%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 52%),
    linear-gradient(155deg, var(--bg) 0%, var(--bg-alt) 60%, var(--bg) 100%);
}
.art-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.art-orb-1{width:540px;height:540px;right:-130px;top:-150px;background:radial-gradient(circle,var(--primary),transparent 70%)}
.art-orb-2{width:440px;height:440px;left:-150px;bottom:-170px;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.4}
.art-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(var(--border-strong) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border-strong) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(82% 80% at 72% 28%,#000,transparent 78%);
          mask-image:radial-gradient(82% 80% at 72% 28%,#000,transparent 78%);
}
.work-hero .hero-grid{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1.05fr .82fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}

/* glassy live-dashboard mockup on the right */
.hero-figure{position:relative}
.dash-wrap{position:relative;animation:dashFloat 7s var(--ease) infinite}
@keyframes dashFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.dash{
  position:relative;border-radius:24px;padding:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 40px 95px -36px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22);
  color:var(--heading);
}
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.dash-title{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.05rem}
.dash-live{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:600;
  color:#3fd9c2;background:rgba(63,217,194,.12);border:1px solid rgba(63,217,194,.3);
  padding:.28rem .6rem;border-radius:999px}
.lv-dot{width:7px;height:7px;border-radius:50%;background:#3fd9c2;box-shadow:0 0 0 0 rgba(63,217,194,.5);animation:lvPulse 2.2s infinite}
@keyframes lvPulse{0%,100%{box-shadow:0 0 0 0 rgba(63,217,194,.5)}50%{box-shadow:0 0 0 6px transparent}}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.3rem}
.ds-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:.85rem .8rem;display:flex;flex-direction:column;gap:.15rem}
.ds-card b{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.6rem;line-height:1;color:var(--primary-strong)}
.ds-card span{font-size:.74rem;color:var(--muted)}
.ds-card em{font-style:normal;font-size:.72rem;font-weight:600;margin-top:.25rem}
.ds-card em.up{color:#48d39b}

.dash-funnel{margin-bottom:1.2rem}
.dfn-label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.9rem;font-weight:600}
.fn-row{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;margin-bottom:.4rem}
.fn-row span{color:var(--text)}
.fn-row b{font-family:"Poppins",sans-serif;font-weight:600;color:var(--heading)}
.fn-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:1rem}
.fn-bar i{display:block;height:100%;border-radius:999px;background:var(--grad)}
.fn-bar i.alt{background:linear-gradient(90deg,#2bb6ff,#3fd9c2)}

.dash-ai{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:14px;
  background:linear-gradient(120deg,rgba(25,205,190,.16),rgba(43,182,255,.10));
  border:1px solid rgba(63,217,194,.24)}
.ai-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--grad);color:var(--on-primary)}
.ai-ico svg{width:18px;height:18px}
.ai-txt b{display:block;font-family:"Poppins",sans-serif;font-weight:600;font-size:.92rem}
.ai-txt span{font-size:.78rem;color:var(--muted)}

/* floating chips */
.dash-float{position:absolute;z-index:3;border-radius:16px;padding:.8rem 1rem;
  background:rgba(13,42,69,.78);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:.1rem}
.dash-float-tl{top:-26px;left:-14px;animation:chipFloatA 5.5s var(--ease) infinite}
.dash-float-br{bottom:-26px;right:-26px;text-align:left;animation:chipFloatB 6.5s var(--ease) infinite}
@keyframes chipFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes chipFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.dfl-k{font-size:.72rem;color:var(--muted)}
.dfl-v{font-family:"Poppins",sans-serif;font-weight:700;font-size:.95rem;color:var(--primary-strong)}
.dfl-v.big{font-size:1.5rem;line-height:1.1;color:var(--heading)}
.dfl-s{font-size:.7rem;color:var(--muted)}
.dfl-s.up{color:#48d39b;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .dash-wrap,.dash-float-tl,.dash-float-br,.lv-dot{animation:none!important}
}

@media (max-width:920px){
  .work-hero .hero-grid{grid-template-columns:1fr}
  .hero-figure{display:none}
}


/* ---- Section intro spacing ---- */
.case-section{position:relative}
.case-section + .case-section{padding-top:0}
/* Project 3 has its own colored band — give it breathing room from Project 2 */
.case-section.work-quote + .case-section,
.case-section + .case-section.work-quote{padding-top:clamp(56px,8vw,104px)}

/* ============ Case study ============ */
.case-grid{
  display:grid;grid-template-columns:1.18fr .82fr;
  gap:clamp(2rem,4.5vw,4rem);align-items:start;margin-top:.5rem;
}
.case-meta{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.5rem}
.meta-k{font-family:"Poppins",sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.meta-v{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.18rem;color:var(--heading)}
.case-summary{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--text);line-height:1.55}
.case-visual{margin-top:1.7rem;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md)}
.case-side .quote-card{margin-top:1.7rem}
.case-visual .ph{aspect-ratio:16/10}

/* second column stacks: three boxes → testimonial → image */
.case-cols{display:flex;flex-direction:column;gap:clamp(1.4rem,2.4vw,1.9rem)}
.case-cols .case-visual,.case-cols .quote-card,.case-cols .quote-visual{margin-top:0}

/* section heading tuned for living inside column 1 */
.section-head.in-col{max-width:none;margin-bottom:clamp(1.6rem,2.4vw,2.1rem)}
.section-head.in-col h2.title{font-size:clamp(1.7rem,2.7vw,2.4rem)}
.section-head.in-col .lead{font-size:clamp(1rem,1.4vw,1.15rem)}

/* three result/challenge/solution cards */
.case-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
/* in column 2, stack the three boxes vertically so each spans full width
   and its itemized text doesn't wrap */
.case-cols .case-tri{grid-template-columns:1fr}
.case-col{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.7rem 1.6rem;position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.case-col:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.case-col::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.55}
.case-col.is-result::before{opacity:1;height:4px}
.case-col.is-result{border-color:var(--border-strong)}
.col-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.col-head h4{margin-bottom:0}
.col-ico{
  width:1.5em;height:1.5em;border-radius:7px;display:grid;place-items:center;flex:none;
  color:var(--primary);background:var(--halo);font-size:1.08rem;
}
.case-col.is-result .col-ico{background:var(--grad);color:var(--on-primary);box-shadow:0 12px 26px -12px var(--halo)}
.col-ico svg{width:1em;height:1em}
.case-col h4{font-size:1.08rem;margin-bottom:1rem;font-weight:600}
.case-list{display:flex;flex-direction:column;gap:.75rem}
.case-list li{display:flex;gap:.7rem;font-size:.96rem;color:var(--text);line-height:1.45}
.case-list li svg{flex:none;width:17px;height:17px;margin-top:.18rem;color:var(--primary)}
.case-col.is-result .case-list li svg{color:var(--accent)}
.case-col.is-challenge .case-list li svg{color:var(--accent-2)}

/* ============ Project testimonial band ============ */
.work-quote{background:var(--bg-alt)}
.work-quote .quote-card{max-width:880px}
.quote-visual{
  max-width:880px;margin:1.6rem auto 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
}
.quote-visual .ph{aspect-ratio:21/7}
.case-cols .quote-visual{max-width:none}
.case-cols .quote-visual .ph{aspect-ratio:16/7}

/* ============ Industries We Serve ============ */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.ind-card{
  display:flex;align-items:center;gap:.95rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.3rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.ind-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.ind-card .i-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--halo);color:var(--primary)}
.ind-card .i-ico svg{width:22px;height:22px}
.ind-card b{font-family:"Poppins",sans-serif;font-weight:600;font-size:1rem;color:var(--heading)}

/* ============ Why Clients Trust Us ============ */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.trust-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem 1.7rem;position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.trust-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.trust-card .t-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:var(--on-primary);margin-bottom:1.3rem;box-shadow:0 12px 26px -12px var(--halo)}
.trust-card .t-ico svg{width:25px;height:25px}
.trust-card h4{font-size:1.12rem;margin-bottom:.55rem;font-weight:600}
.trust-card p{font-size:.95rem;color:var(--muted);margin:0;line-height:1.5}
.trust-num{position:absolute;top:1.5rem;right:1.6rem;font-family:"Poppins",sans-serif;font-weight:700;font-size:.85rem;color:var(--border-strong)}

/* ---- page-tag chips on section heads ---- */
.proj-tag{
  display:inline-flex;align-items:center;gap:.5rem;font-family:"Poppins",sans-serif;
  font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.proj-tag b{color:var(--primary)}

/* ---- extra reveal flavour ---- */
.reveal-up{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-up.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-up{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .case-grid{grid-template-columns:1fr}
  .case-tri{grid-template-columns:1fr 1fr}
  .case-cols .case-tri{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .case-tri{grid-template-columns:1fr}
  .case-cols .case-tri{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .work-hero .hero-copy p.sub + p.sub{margin-top:-.6rem}
}