/* work.css */

/* ================= NAV ================= */

/* ================= SERVICE CARD ================= */
.card{display:flex;flex-direction:column;background:#fdfbff;text-decoration:none;color:#23004c;
  position:relative;box-shadow:0 0 0 1px rgba(35,0,76,.12);
  transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 0 0 1px #7200d7,0 14px 30px -18px rgba(35,0,76,.4);transform:translateY(-2px)}
.card .tile{position:relative;display:block;aspect-ratio:16/9}
.card .clip{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;display:block}
.card .photo{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#e4d9f8;
  background-size:cover;background-position:center;transition:transform .45s ease}
.card:hover .photo{transform:scale(1.045)}
.card .icontile{position:absolute;top:0;right:0;bottom:0;left:0;background:#f2e8fe;
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(114,0,215,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(114,0,215,.07) 1px,transparent 1px);
  background-size:16px 16px;transition:background-color .18s ease}
.card:hover .icontile{background-color:#e9dcfb}
.card .veil{position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(35,0,76,0) 55%,rgba(35,0,76,.28) 100%);
  opacity:0;transition:opacity .25s ease}
.card:hover .veil{opacity:1}
.card .nobadge{padding-top:22px}
.card .badge{position:absolute;left:16px;bottom:-18px;width:40px;height:40px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(35,0,76,.14);
  transition:background .18s ease}
.card .badge svg{stroke:#23004c;transition:stroke .18s ease}
.card:hover .badge{background:#7200d7}
.card:hover .badge svg{stroke:#fff}
.card .wipe{position:absolute;left:0;bottom:0;height:3px;width:0;background:#7200d7;transition:width .28s ease}
.card:hover .wipe{width:100%}
.card:hover .cta{color:#7200d7}
/* ================= FORM FIELDS ================= */
.fld{font-family:inherit;font-size:14px;padding:12px;border:0;border-radius:4px;background:#fff;
  color:#23004c;box-shadow:inset 0 0 0 1px rgba(35,0,76,.2);transition:box-shadow .16s ease}
.fld:focus{outline:none;box-shadow:inset 0 0 0 2px #7200d7}
.fld::placeholder{color:#8e7cab}
.plan{background:#fdfbff;box-shadow:0 0 0 1px rgba(35,0,76,.12);padding:22px 24px;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;transition:box-shadow .18s ease}
.plan:hover{box-shadow:0 0 0 1px #7200d7}
.faqq{width:100%;background:none;border:0;padding:20px 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;cursor:pointer;text-align:left;font-family:inherit;font-size:16.5px;
  font-weight:500;color:#23004c;letter-spacing:-.01em;transition:color .16s ease}
.faqq:hover{color:#7200d7}
/* deep solid tier, for the secondary CTA the inner pages already used */
.btn-ink{background:#23004c;color:#fff;box-shadow:0 8px 20px -10px rgba(35,0,76,.7)}
.btn-ink .chip{background:rgba(255,255,255,.16)}
.btn-ink:hover{background:#7200d7;color:#fff}
.btn-ink:hover .chip{background:rgba(255,255,255,.26)}

/* project filter pills (state toggled by assets/js/work.js) */
.work-filter{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;
  border-radius:100px;cursor:pointer;border:1px solid rgba(35,0,76,.24);background:transparent;color:#4d3a70}
.work-filter:hover{border-color:#23004c;color:#23004c}
.work-filter.on{border-color:#23004c;background:#23004c;color:#f6f1fd}
.work-filter:focus-visible{outline:2px solid #7200d7;outline-offset:2px}