/* services.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}
.svc-card{transition:box-shadow .18s ease,transform .18s ease}
.svc-card:hover{background:#fff !important;box-shadow:0 0 0 1px #7200d7,0 14px 30px -18px rgba(35,0,76,.4) !important;transform:translateY(-2px)}
/* 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)}
html{scroll-behavior:smooth}
/* the banner photo. The desktop strip is 24/5, so it shows a horizontal band
   roughly a third of the way down a 3/2 photo; `pos-lower` nudges that band
   down for images whose top edge would otherwise slice through something. */
.svc-img{width:100%;height:100%;object-fit:cover;display:block}
.svc-img.pos-30{object-position:50% 30%}
.svc-img.pos-42{object-position:50% 42%}
.svc-img.pos-56{object-position:50% 56%}
/* the scrim that keeps the title legible over whatever photo sits behind it */
.svc-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,0,45,.1) 0%,rgba(20,0,45,.8) 100%)}
/* ---- service banner card: responsive ----
   the card is styled inline, so these overrides need !important to win */
@media (max-width:900px){
  .svc-body{grid-template-columns:1fr !important;gap:26px !important;padding:24px !important}
  .svc-pills{max-height:none !important;overflow:visible !important;padding-right:0 !important}
  .svc-stats{gap:20px !important}
}
@media (max-width:720px){
  /* at phone width a 24/5 strip is about 65px tall, which stacks the title,
     the tagline and the button on top of each other inside the image */
  .svc-banner{aspect-ratio:3/2 !important}
  .svc-bar{flex-direction:column !important;align-items:flex-start !important;
    gap:14px !important;left:18px !important;right:18px !important;bottom:16px !important}
  .svc-h2{font-size:22px !important}
  .svc-body{padding:20px !important}
  /* the stacked bar reaches higher up the image here, so the dark end of the
     scrim has to start sooner or the tagline lands on a bright patch */
  .svc-scrim{background:linear-gradient(180deg,rgba(20,0,45,.06) 0%,
    rgba(20,0,45,.58) 38%,rgba(20,0,45,.92) 100%)}
}
/* ---- hero: same field treatment as the About page ---- */
/* About's hero runs 583px because its headline wraps to two lines and its
   lede to three; this page's copy is shorter, so the height is set rather
   than left to the copy, and both pages open at the same size */
.ahero{position:relative;background:#23004c;color:#f6f1fd;overflow:hidden;
  display:flex;align-items:center;min-height:583px}
.afx{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
/* this clip is already a dark room, so it needs less taking down than the
   About footage before the scrim goes over it */
.avid{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;display:block;filter:saturate(.42) contrast(1.02) brightness(.40)}
.ascrim{position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(100deg,rgba(18,0,42,.95) 0%,rgba(22,0,52,.91) 34%,rgba(34,0,82,.76) 64%,rgba(52,0,118,.62) 100%)}
.ascrim-b{position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(20,0,45,.5) 0%,rgba(20,0,45,0) 24%,rgba(20,0,45,0) 60%,rgba(20,0,45,.6) 100%)}
.ahero-in{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:80px 40px 76px}
.ahero-h1{font-weight:700;font-size:54px;line-height:1.04;letter-spacing:-.036em;
  margin:0 0 20px;color:#fff;max-width:940px}
.ahero-p{max-width:640px;margin:0 0 30px;font-size:16.5px;line-height:1.62;color:#d3bdf2}
.ahero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:28px;
  border-top:1px solid rgba(246,241,253,.2)}
.ahero-facts > span{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  font-size:12.5px;color:#e8def9;background:rgba(246,241,253,.09);
  box-shadow:inset 0 0 0 1px rgba(246,241,253,.18)}
.ahero-facts > span:before{content:"";width:6px;height:6px;border-radius:50%;
  background:#ff9333;flex:none}
@media (max-width:820px){
  .ahero{min-height:669px}
  .ahero-h1{font-size:36px}
  .ahero-in{padding:56px 24px 56px}
  .ahero-p{font-size:15.5px}
}
/* ---- the cards sit on the same orange field as the About story ---- */
.svc-field{background:radial-gradient(132% 104% at 16% -12%,#c94c0b 0%,#bf470a 44%,#b34109 100%);
  padding:60px 0 68px}
.svc-in{max-width:1280px;margin:0 auto;padding:0 40px;
  display:flex;flex-direction:column;gap:26px}
@media (max-width:720px){
  .svc-field{padding:40px 0 46px}
  .svc-in{padding:0 20px;gap:20px}
}
/* the card body sits a clear step below the page's usual light grey, which
   costs the mono labels their contrast unless the orange comes down too */
.svc-body .lbl{color:#9c3807}
/* the pills were within .05 luminance of the new ground, so they lift
   above it instead of sitting just under it */
.svc-pills a{background:#f6f1fd !important}