/* ═══════════════════════════════════════════════════════════════
   PROJECT MOCKUPS (v1.6.0) — stylized stand-ins, prefix pm-
   Rendered by inc/project-mockups.php; replaced by a Featured Image when set
   ═══════════════════════════════════════════════════════════════ */
.pm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:'Space Grotesk',sans-serif;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pm *{box-sizing:border-box;margin:0;padding:0}
.pm-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pm-bg-denzal{background:linear-gradient(135deg,#1b1a17,#0c0c0f)}
.pm-bg-birch{background:linear-gradient(135deg,#0f1a2e,#060a14)}
.pm-bg-altier{background:#1b0f16}
.pm-bg-quiz{background:linear-gradient(135deg,#1a0f22,#07071a)}
.pm-bg-bp{background:radial-gradient(circle at 70% 30%,rgba(139,92,246,.35),#07071a 70%)}
.pm-bg-lcvb{background:#0b1a14}
.pm-bg-generic{background:linear-gradient(135deg,#0d1424,#07071a)}

.pm-browser{width:84%;max-width:560px;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);background:#111}
.pm-w92{width:92%}.pm-w80{width:80%}.pm-w84{width:84%}
.pm-bar{height:24px;background:#1c1c22;display:flex;align-items:center;gap:5px;padding:0 10px}
.pm-bar i{width:8px;height:8px;border-radius:50%;background:#3a3a44}
.pm-bar span{margin-left:10px;height:12px;flex:1;max-width:220px;border-radius:6px;background:#2a2a33;font-family:'JetBrains Mono',monospace;font-size:7px;color:#777;line-height:12px;padding-left:8px;overflow:hidden;white-space:nowrap}

.pm-dz{background:linear-gradient(180deg,#2a241c,#15130f);padding:18px 18px 16px;position:relative}
.pm-dz-nav{display:flex;justify-content:space-between;font-size:8px;color:#d6c7a8;letter-spacing:1px;margin-bottom:26px}
.pm-dz-nav b{font-family:'Syne',sans-serif;font-size:11px;color:#fff;letter-spacing:1px}
.pm-dz h5{font-family:'Syne',sans-serif;font-size:21px;font-weight:800;color:#fff;line-height:1.05;max-width:60%;margin-bottom:8px;letter-spacing:-.5px}
.pm-dz-s{font-size:8px;color:#bfae8d;max-width:55%;margin-bottom:12px}
.pm-dz-b{display:inline-block;background:#d9a441;color:#1a140a;font-size:8px;font-weight:700;padding:5px 9px;border-radius:3px}
.pm-dz svg{position:absolute;right:16px;top:58px;width:38%}
.pm-dz-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:18px;position:relative;z-index:1}
.pm-dz-row div{height:34px;border-radius:4px;background:#1f1b15;border:1px solid rgba(217,164,65,.2);font-size:6.5px;color:#cbb994;padding:5px}
.pm-inset{position:absolute;right:5%;bottom:6%;width:32%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:2px solid rgba(52,211,153,.6);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.pm-inset svg{width:100%;height:100%;display:block}
.pm-hc{position:absolute;width:12px;height:12px;border-color:rgba(255,255,255,.8);border-style:solid}
.pm-tl{top:7px;left:7px;border-width:1.5px 0 0 1.5px}.pm-tr{top:7px;right:7px;border-width:1.5px 1.5px 0 0}
.pm-bl{bottom:7px;left:7px;border-width:0 0 1.5px 1.5px}.pm-br{bottom:7px;right:7px;border-width:0 1.5px 1.5px 0}
.pm-rec{position:absolute;top:8px;left:24px;font-family:'JetBrains Mono',monospace;font-size:7px;color:#fff;letter-spacing:.5px}
.pm-rec::before{content:'● ';color:#ef4444}

.pm-bw{background:#0f1a2e;position:relative;height:190px;overflow:hidden}
.pm-bw-img{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,26,46,.2),rgba(15,26,46,.95)),linear-gradient(135deg,#3a4a66,#1d2a44 40%,#a58a55 120%)}
.pm-bw-t{position:absolute;left:18px;bottom:40px;color:#fff}
.pm-bw-t small{display:block;font-size:7px;letter-spacing:2px;color:#d4b574;margin-bottom:4px}
.pm-bw-t b{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700}
.pm-bw-plans{position:absolute;left:18px;right:18px;bottom:10px;display:flex;gap:5px}
.pm-bw-plans span{flex:1;height:20px;border-radius:3px;border:1px solid rgba(212,181,116,.4);background:rgba(255,255,255,.05);font-size:6px;color:#d4b574;display:grid;place-items:center}

.pm-al{background:#fff3f8;height:180px;position:relative;overflow:hidden}
.pm-al-band{position:absolute;inset:0;background:repeating-linear-gradient(-12deg,#00778b 0 16px,#00778b00 16px 38px);opacity:.14}
.pm-al-logo{position:absolute;left:18px;top:26px;font-family:'Syne',sans-serif;font-weight:800;font-size:24px;color:#e83e8c;text-shadow:3px 3px 0 #00778b}
.pm-al-sub{position:absolute;left:20px;top:64px;font-size:9px;font-weight:700;color:#00778b;letter-spacing:1px}
.pm-al-btn{position:absolute;left:20px;top:92px;background:#e83e8c;color:#fff;font-size:8px;font-weight:700;padding:6px 11px;border-radius:20px;box-shadow:2px 2px 0 #00778b}
.pm-al-sticker{position:absolute;right:22px;top:26px;width:86px;height:86px;border-radius:50%;background:#e83e8c;border:5px solid #fff4e0;box-shadow:0 0 0 3px #f7a8c9,0 10px 20px rgba(0,0,0,.2);display:grid;place-items:center;text-align:center;color:#fff;font-family:'Syne',sans-serif;font-weight:800;font-size:15px;line-height:1.05;transform:rotate(-8deg)}

.pm-quiz{width:84%;max-width:420px;background:#0e1422;border:1px solid rgba(139,92,246,.35);border-radius:12px;padding:16px;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.pm-q-top{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:8px;color:#94a3b8;margin-bottom:8px}
.pm-q-prog{height:4px;border-radius:4px;background:#1f2638;margin-bottom:12px;overflow:hidden}
.pm-q-prog i{display:block;height:100%;width:62%;background:linear-gradient(90deg,#e83e8c,#8b5cf6)}
.pm-q-q{font-size:10.5px;color:#e2e8f0;font-weight:600;margin-bottom:10px;line-height:1.4}
.pm-q-o{font-size:9px;color:#cbd5e1;border:1px solid #273048;border-radius:6px;padding:6px 8px;margin-bottom:5px}
.pm-q-o.pm-ok{border-color:#10b981;background:rgba(16,185,129,.1);color:#a7f3d0}
.pm-q-ai{margin-top:8px;font-size:8.5px;color:#c4b5fd;background:rgba(139,92,246,.1);border-radius:6px;padding:7px 8px;line-height:1.45}
.pm-q-ai b{color:#fff}

.pm-gauge{width:78%;max-width:380px;background:#0d0d22;border:1px solid rgba(0,212,255,.25);border-radius:14px;padding:18px;display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.pm-rw{display:flex;justify-content:space-between;font-size:9px;color:#cbd5e1;border-top:1px solid rgba(255,255,255,.07);padding:5px 0}
.pm-rw span:last-child{color:#10b981;font-family:'JetBrains Mono',monospace}

.pm-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.pm-gen{background:#0f1424;padding:22px;display:flex;flex-direction:column;gap:8px;height:170px}
.pm-gen b{font-family:'Syne',sans-serif;color:#fff;font-size:18px}
.pm-gen span{height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.pm-gen span.pm-short{width:55%}

/* Home page Work cards are shorter — shrink the mockup a little */
.wc-thumb .pm-browser,.wc-thumb .pm-quiz,.wc-thumb .pm-gauge{transform:scale(.8);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wc:hover .wc-thumb .pm-browser,.wc:hover .wc-thumb .pm-quiz,.wc:hover .wc-thumb .pm-gauge{transform:scale(.84) translateY(-3px)}
.wc-thumb .pm-inset{width:28%}
.wc-thumb .pm-photo{opacity:.9}
@media(max-width:700px){.pm-dz-nav span,.pm-dz svg{display:none}}