/* ============================================================
   Service page template (every page under services/).
   Loaded after home.css, which provides the shared pieces:
   buttons, highlight blobs, headings, stat card, service cards,
   stickers and scroll motion. Only service-page parts live here.
   ============================================================ */

/* ---------- 1. Hero ---------- */
.sp-hero { padding: clamp(28px, 4vw, 48px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.sp-hero .hp-two { --col: 460px; gap: 40px; align-items: center; }

.sp-crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--hp-label); margin-bottom: 10px; }
.sp-crumbs a,
.sp-crumbs [aria-current] { display: inline-block; padding: 12px 0; }
.sp-crumbs a { text-decoration: none; }
.sp-crumbs [aria-current] { color: var(--hp-body); }

/* Illustration: one idle bob, plus a draw-in on load */
.sp-art { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 44px; }
.sp-art-ill { animation: spBob 6s ease-in-out infinite; }
.sp-art-ill svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 24px rgba(10,37,64,.16)); }
.sp-art-ill [data-s] { stroke-dasharray: 1; animation: spDrawIn 1.3s ease both; }
.sp-art-ill [data-f] { animation: spFillIn .6s ease 1.1s both; }
.sp-art-ill .sp-sel { animation: spFade .4s ease 1.3s both; }
/* Dashed guide lines can't draw in (the draw-in replaces their dashes), so they fade in */
.sp-art-ill [data-sd] { animation: spStrokeIn .6s ease both; }
/* Pages without a stat card: the illustration fills the column */
.sp-art-solo { padding-bottom: 0; }

/* ---------- 2. What's included ---------- */
.sp-included .hp-h2 { margin-bottom: 48px; }
.sp-included .hp-service:hover .hp-service-top svg { transform: none; }
.sp-also {
  margin-top: 40px;
  padding: 30px 0;
  border-top: 2px dashed #cbd5e1;
  border-bottom: 2px dashed #cbd5e1;
}
.sp-also-label { font-family: var(--hp-serif); font-style: italic; font-size: 22px; color: var(--hp-blue); margin-bottom: 20px; }
.sp-also-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 48px; list-style: none; }
.sp-also-item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.sp-also-item svg { margin-top: 3px; }
.sp-also-item .hp-h3 { font-size: 20px; line-height: 1.2; margin-bottom: 6px; }
.sp-also-item p { font-size: 15px; line-height: 1.55; color: var(--hp-body); }

/* "My promise" card (Klaviyo pages): part of section 2 */
.sp-promise-wrap { display: flex; justify-content: flex-start; margin-top: 40px; padding: 0 10px; }
.sp-promise {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  max-width: 640px;
  background: #fff;
  border: 3px solid var(--hp-navy);
  border-radius: 18px;
  padding: 24px 28px 24px 24px;
  box-shadow: 0 18px 30px -18px rgba(10,37,64,.5);
  transform: rotate(-1deg);
}
.sp-promise-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hp-blue);
  border: 2px solid var(--hp-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.sp-promise-label { font-family: var(--hp-serif); font-style: italic; font-size: 15px; color: var(--hp-blue); margin-bottom: 6px; }
.sp-promise .hp-h3 { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.2; margin-bottom: 8px; }
.sp-promise p { font-size: 15px; line-height: 1.55; color: var(--hp-body); text-wrap: pretty; }
.sp-promise .sp-promise-small { font-size: 13px; line-height: 1.5; color: var(--hp-label); margin-top: 10px; }

/* ---------- 3. FAQ ----------
   Uses the shared .faq-acc accordion (footer.js opens one at a
   time); these rules restyle it to match the page. */
.sp-faq { background: var(--hp-tint); }
.sp-faq .hp-two { --col: 380px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.sp-faq .hp-h2 { margin-bottom: 18px; max-width: 460px; }
.sp-faq-note { font-size: 19px; color: var(--hp-body); text-wrap: pretty; max-width: 420px; }
.sp-faq-note a { display: inline-block; padding: 9px 0; }
.sp .faq-acc { border-top: none; }
.sp .faq-item { border-top: 2px dashed #cbd5e1; border-bottom: none; }
.sp .faq-item:last-child { border-bottom: 2px dashed #cbd5e1; }
.sp .faq-q {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--hp-serif);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--hp-navy);
  transition: color .18s;
}
.sp .faq-q:hover { color: var(--hp-blue); }
.sp-faq-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.sp-faq-icon > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--hp-navy);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-faq-icon .v { transform-box: fill-box; transform-origin: center; transition: transform .3s ease; }
.sp .faq-item.is-open .sp-faq-icon .v { transform: rotate(90deg); }
.sp .faq-a { transition: grid-template-rows .35s ease, visibility 0s .35s; }
.sp .faq-item.is-open .faq-a { transition: grid-template-rows .35s ease, visibility 0s; }
.sp .faq-a > div { min-height: 0; }
.sp .faq-a p { font-size: 16px; line-height: 1.6; color: var(--hp-body); padding: 0 60px 24px 0; max-width: 620px; text-wrap: pretty; }

/* ---------- 4. Closing CTA ---------- */
.sp-cta { text-align: center; }
.sp-cta .hp-wrap { max-width: 760px; }
.sp-me { display: flex; flex-direction: column; align-items: center; margin-bottom: 34px; }
.sp-me img { width: 112px; height: 112px; object-fit: cover; border-radius: 28px; border: 3px solid #fff; display: block; }
.sp-me .hp-sticker { position: static; margin-top: -16px; color: var(--hp-navy); padding: 8px 14px; transform: rotate(-3deg); white-space: nowrap; }
.sp-cta .hp-h2 { font-size: clamp(32px, 5vw, 64px); margin-bottom: 20px; }
.sp-cta-sub { font-size: 19px; color: rgba(255,255,255,.85); margin-bottom: 32px; text-wrap: pretty; }
.sp-cta .hp-btn:hover { box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.sp-cta-small { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 22px; text-wrap: pretty; }
.hp .sp-cta-small a,
.hp .sp-cta-small a:hover { color: #fff; display: inline-block; padding: 12px 0; }

/* ---------- Motion ---------- */
@keyframes spBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spDrawIn { from { stroke-dashoffset: 1; } }
@keyframes spFillIn { from { fill-opacity: 0; } }
@keyframes spFade { from { opacity: 0; } }
@keyframes spStrokeIn { from { stroke-opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after { animation: none !important; transition: none !important; }
}