/* ==========================================================
   Black Pearl Automation - Web & Digital and case study pages
   Loaded only by /services/web-digital/ and /work/ pages, after site.css.
   ========================================================== */
.shots{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:34px}
.shot{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(11,20,24,.07)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:11px 15px;font-size:.88rem;line-height:1.45;color:var(--body)}
.shot.wide{grid-column:1/-1}
.shot.dark{background:var(--ink);border-color:#1d3640}
.shot.dark figcaption{color:#b9cdd4}
.spec{margin:34px 0 0;max-width:920px}
.spec>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:8px 28px;padding:17px 0;border-bottom:1px solid var(--line)}
.spec>div:first-child{border-top:1px solid var(--line)}
.spec dt{color:var(--ink);font-weight:650}
.spec dd{margin:0}
@media (max-width:620px){.spec>div{grid-template-columns:1fr;gap:4px;padding:15px 0}}
.wcards{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-top:40px}
.wcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
.wcard:hover{transform:translateY(-4px);border-color:#b6dbe3;box-shadow:0 16px 36px rgba(11,20,24,.1)}
.wcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;border-bottom:1px solid var(--line)}
.wcard-b{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.wcard h3{font-size:1.22rem;margin-bottom:.4em}
.wcard p{font-size:.97rem}
.wcard .more{margin-top:auto;padding-top:8px;font-weight:650;font-size:.94rem;color:var(--accent)}
.fine{font-size:.86rem;color:#5b6b72;margin-top:22px;max-width:80ch}
.cta .fine{color:#b9d6dd;margin-left:auto;margin-right:auto}
.flowband{background:var(--ink);color:#b3c8cf;padding:clamp(40px,6vw,76px) 0}
.flowband h2{color:#fff}
.flowband .eyebrow{color:#5fd3e6}
.flowband .lede{color:#b3c8cf}
.flow{list-style:none;counter-reset:f;margin:38px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.flow li{counter-increment:f;position:relative;background:#12242c;border:1px solid #1d3640;border-radius:12px;padding:20px 20px 20px 66px}
.flow li::before{content:counter(f);position:absolute;left:18px;top:20px;width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.flow li.gold{border-color:#7a6410}
.flow li.gold::before{background:var(--gold);color:var(--ink)}
.flow b{display:block;color:#fff;font-size:1.02rem;margin-bottom:4px}
.flow span{font-size:.93rem;line-height:1.55;display:block}
.flow em{display:block;margin-top:9px;font-style:normal;font-size:.8rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:#5fd3e6}
.toolsplit{display:grid;gap:clamp(26px,4vw,48px);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;margin-top:40px}
@media (max-width:860px){.toolsplit{grid-template-columns:1fr}}
.toolsplit .spec{margin-top:0}
.toolsplit .spec>div{grid-template-columns:1fr;gap:4px}
/* ---- Plans & pricing (Web & Digital) ---- */
.buildband{display:grid;gap:18px 34px;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center;margin-top:36px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.buildband .amt{background:var(--accent);color:#fff;border-radius:12px;padding:20px;text-align:center}
.buildband .amt b{display:block;font-size:2.3rem;line-height:1.1;color:var(--gold)}
.buildband .amt span{font-size:.86rem;color:#d4eef3}
.buildband .checks{margin:0}
@media (max-width:720px){.buildband{grid-template-columns:1fr}}
.plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:30px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px}
.plan.best{border:2px solid var(--gold);box-shadow:0 14px 32px rgba(11,20,24,.09)}
.plan .badge{position:absolute;top:-13px;left:24px;background:var(--gold);color:var(--ink);font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.plan h3{margin-bottom:.15em}
.plan .amt{font-size:2rem;font-weight:700;color:var(--ink);line-height:1.15}
.plan .amt small{font-size:.95rem;font-weight:600;color:var(--body)}
.plan .sub{font-size:.9rem;margin:2px 0 14px}
.plan .checks{margin-bottom:0}
.plan .checks li.no{opacity:.55}
.ptable{width:100%;border-collapse:collapse;margin-top:30px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
.ptable th,.ptable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{background:var(--ink);color:#fff;font-weight:650}
.ptable tbody tr:nth-child(even){background:var(--bg)}
.ptable td:nth-child(2){white-space:nowrap;font-weight:650;color:var(--ink)}
.ptable tr.combo td{background:#fff8dc}
@media (max-width:640px){.ptable thead{display:none}.ptable tr{display:block;padding:10px 14px;border-bottom:1px solid var(--line)}.ptable td{display:block;border:0;padding:2px 0}.ptable td:nth-child(2){white-space:normal}}
.aigrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:30px}
.aicard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.aicard .amt{font-weight:700;color:var(--accent);margin:0 0 10px}
.aicard .rule{background:var(--bg);border-left:4px solid var(--gold);border-radius:8px;padding:12px 14px;font-size:.93rem;margin-top:14px}