/* ═══════════════════════════════════════════════════════════════
   PROJECT DETAIL PAGES · shared styles
   Builds on assets/css/style.css tokens. Load AFTER style.css.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- LAYOUT HELPERS ---------- */
.pwrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.pj-main{position:relative;z-index:1;padding-top:var(--nav)}
.pj-sec{padding-block:clamp(48px,7vw,96px)}
.pj-sec--tight{padding-block:clamp(34px,5vw,64px)}

/* ---------- BREADCRUMB ---------- */
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);margin-bottom:22px}
.crumb a{color:var(--ink-3);transition:.25s var(--ease)}
.crumb a:hover{color:var(--acc)}
.crumb span{color:var(--ink-4)}
.crumb b{color:var(--ink-2);font-weight:500}

/* ---------- HERO ---------- */
.pj-hero{position:relative;padding-top:clamp(26px,5vw,54px);padding-bottom:clamp(30px,4vw,50px)}
.pj-hero__cat{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;
  border:1px solid var(--stroke);background:var(--surf);font-family:var(--f-mono);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:20px}
.pj-hero__cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--acc));box-shadow:0 0 12px var(--c,var(--acc))}
.pj-hero__title{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(38px,7vw,76px);margin-bottom:16px}
.pj-hero__title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pj-hero__tag{font-family:var(--f-display);font-size:clamp(16px,2.3vw,22px);font-weight:500;color:var(--ink-2);margin-bottom:20px;max-width:46ch}
.pj-hero__lede{font-size:clamp(15px,1.6vw,18px);color:var(--ink-2);line-height:1.7;max-width:64ch}
.pj-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.pj-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pj-meta span{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--stroke);background:var(--surf);font-size:12.5px;color:var(--ink-2)}
.pj-meta span b{color:var(--ink-3);font-weight:400;font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- STATS STRIP ---------- */
.pj-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding-block:clamp(24px,3vw,34px)}
.pj-stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(26px,4vw,40px);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.pj-stat span{display:block;font-size:12px;color:var(--ink-3);margin-top:8px;line-height:1.4}

/* ---------- SECTION HEAD ---------- */
.pj-head{max-width:60ch;margin-bottom:34px}
.pj-head .eyebrow{display:inline-block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.pj-head h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(26px,3.6vw,40px)}
.pj-head h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pj-head p{margin-top:14px;color:var(--ink-2);font-size:15.5px;line-height:1.7}

/* ---------- PROSE ---------- */
.pj-prose{max-width:70ch}
.pj-prose p{color:var(--ink-2);font-size:16px;line-height:1.75;margin-bottom:18px}
.pj-prose p:last-child{margin-bottom:0}
.pj-prose b,.pj-prose strong{color:var(--ink);font-weight:600}

/* ---------- TWO-COLUMN (content + aside) ---------- */
.pj-split{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(26px,4vw,56px);align-items:start}
.pj-aside{position:sticky;top:calc(var(--nav) + 20px);display:grid;gap:16px}
.pj-card{border:1px solid var(--stroke);background:var(--surf);border-radius:var(--r-l);padding:22px;position:relative;overflow:hidden}
.pj-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.5}
.pj-card h4{font-family:var(--f-display);font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:600}
.pj-card ul{display:grid;gap:11px}
.pj-card li{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.pj-card li svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--c,var(--acc))}
.pj-card .pj-card__k{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:9px 0;border-bottom:1px solid var(--stroke)}
.pj-card .pj-card__k:last-child{border-bottom:0}
.pj-card__k span{color:var(--ink-3)}
.pj-card__k b{color:var(--ink);font-weight:500;text-align:right}

/* ---------- MARKET RESEARCH ---------- */
.mrx{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mrx__item{border:1px solid var(--stroke);background:var(--surf);border-radius:var(--r-l);padding:24px;transition:.4s var(--ease)}
.mrx__item:hover{transform:translateY(-4px);border-color:var(--stroke-hi);box-shadow:var(--shadow)}
.mrx__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--grad-soft);border:1px solid var(--stroke)}
.mrx__ic svg{width:21px;height:21px;color:var(--acc)}
.mrx__item h4{font-family:var(--f-display);font-size:16px;font-weight:600;margin-bottom:9px}
.mrx__item p{font-size:13.5px;color:var(--ink-3);line-height:1.6}

/* ---------- FEATURES ---------- */
.pfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.pfeat__i{border:1px solid var(--stroke);background:var(--surf);border-radius:var(--r);padding:20px;
  transition:.35s var(--ease);display:flex;gap:14px;align-items:flex-start}
.pfeat__i:hover{border-color:var(--stroke-hi);background:var(--surf-2);transform:translateY(-3px)}
.pfeat__n{font-family:var(--f-mono);font-size:12px;color:var(--c,var(--acc));flex-shrink:0;padding-top:2px}
.pfeat__i h4{font-family:var(--f-display);font-size:15px;font-weight:600;margin-bottom:6px}
.pfeat__i p{font-size:13px;color:var(--ink-3);line-height:1.55}

/* ---------- AUDIENCE / CHIPS ---------- */
.aud{display:flex;flex-wrap:wrap;gap:10px}
.aud span{padding:10px 16px;border-radius:99px;border:1px solid var(--stroke);background:var(--surf);
  font-size:13.5px;color:var(--ink-2);transition:.3s var(--ease)}
.aud span:hover{border-color:var(--c,var(--acc));color:var(--ink)}

/* ---------- TECH TAGS ---------- */
.tstack{display:flex;flex-wrap:wrap;gap:9px}
.tstack span{font-family:var(--f-mono);font-size:11.5px;padding:7px 13px;border-radius:8px;
  border:1px solid var(--stroke);background:var(--surf);color:var(--ink-2)}

/* ---------- CTA BLOCK ---------- */
.pj-ctablock{text-align:center;border:1px solid var(--stroke);border-radius:var(--r-xl);
  padding:clamp(36px,6vw,72px) var(--pad);background:var(--grad-soft);position:relative;overflow:hidden}
.pj-ctablock h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,4vw,44px);letter-spacing:-.02em;margin-bottom:16px}
.pj-ctablock h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pj-ctablock p{color:var(--ink-2);max-width:52ch;margin:0 auto 28px;font-size:16px;line-height:1.7}
.pj-ctablock .pj-hero__cta{justify-content:center}

/* ---------- OTHER PROJECTS ---------- */
.pmore{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pmore a{border:1px solid var(--stroke);background:var(--surf);border-radius:var(--r-l);padding:20px;
  transition:.35s var(--ease);display:grid;gap:8px}
.pmore a:hover{transform:translateY(-4px);border-color:var(--stroke-hi);box-shadow:var(--shadow)}
.pmore a span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pmore a b{font-family:var(--f-display);font-size:16px;font-weight:600}
.pmore a i{font-style:normal;font-size:13px;color:var(--ink-3);line-height:1.5}

/* ---------- FOOTER ---------- */
.pj-foot{border-top:1px solid var(--stroke);padding-block:34px;margin-top:20px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--ink-3)}
.pj-foot a{color:var(--ink-2)}
.pj-foot a:hover{color:var(--acc)}

/* ---------- REVEAL ---------- */
.no-motion [data-rise]{opacity:1!important;transform:none!important}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .pj-split{grid-template-columns:1fr}
  .pj-aside{position:static}
}