/* ============================================================
   SERVICE DETAIL PAGE — section styles
   Builds on the homepage system (styles-new.css) + Invesp brand
   layer (styles-brand-invesp.css). Reuses .hero, .section,
   .section-head, .eyebrow, .h-section, .lede, .inc-grid,
   .final-cta. Adds: hero price chips, a large lead statement,
   the SHIP process grid, "who benefits" cards, a royal
   credentials band, and the pricing callout.
   Scoped under body.svc-page so nothing leaks to other pages.
   ============================================================ */

/* ---------- Hero price chips ---------- */
.svc-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.svc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  padding: 8px 15px; border-radius: 999px;
}
.svc-chip-price { background: hsl(263 75% 62% / .2); color: hsl(263 82% 86%); font-weight: 600; }
.svc-chip-note { background: hsl(0 0% 100% / .1); color: hsl(220 32% 88%); }
.svc-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }

/* ---------- Lead statement (white) ---------- */
.svc-lead { padding: 84px 0 0; }
.svc-lead .container-wide { max-width: 1100px; }
.svc-lead-inner {
  border-left: 3px solid hsl(263 75% 58%);
  padding-left: 34px;
  max-width: 70ch;
}
.svc-lead-text {
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.5; letter-spacing: -.01em;
  color: hsl(var(--foreground) / .92);
  margin: 0; text-wrap: pretty;
}

/* ---------- SHIP process grid ---------- */
.proc-head { margin-bottom: 40px; }
.proc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  border-top: 1px solid hsl(var(--border));
}
.proc-item {
  display: flex; align-items: baseline; gap: 18px;
  padding: 19px 4px;
  border-bottom: 1px solid hsl(var(--border));
}
.proc-num {
  font-family: var(--font-mono, 'Space Grotesk', monospace);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: hsl(263 60% 50%); min-width: 26px;
}
.proc-label { font-size: 17px; line-height: 1.4; color: hsl(var(--foreground)); }
@media (max-width: 760px) { .proc-grid { grid-template-columns: 1fr; column-gap: 0; } }

/* ---------- Who benefits cards ---------- */
.svc-benefit-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.svc-benefit-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.svc-benefit-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(263 75% 58% / .12); color: hsl(263 60% 50%);
  flex-shrink: 0;
}
.svc-benefit-text { font-size: 17px; line-height: 1.5; color: hsl(var(--foreground) / .9); margin: 0; }
@media (max-width: 880px) { .svc-benefit-grid { grid-template-columns: 1fr; } }

/* ---------- Why Invesp royal band ---------- */
.svc-why {
  background: var(--inv-band-fill);
  background-color: hsl(var(--inv-band));
  color: #fff;
}
.svc-why .container-wide { position: relative; z-index: 1; }
.svc-why-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center;
}
.svc-why .eyebrow { color: hsl(263 82% 82%); }
.svc-why-head { font-family: var(--font-display, inherit); font-size: clamp(30px, 3vw, 42px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 14px 0 20px; color: #fff; }
.svc-why-text { font-size: 18px; line-height: 1.6; color: hsl(220 32% 88%); margin: 0; max-width: 56ch; }
.svc-why-stats { display: flex; flex-direction: column; gap: 24px; }
.svc-why-stat { border-left: 2px solid hsl(263 70% 64% / .6); padding-left: 20px; }
.svc-why-stat .num { display: block; font-family: var(--font-display, inherit); font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1; }
.svc-why-stat .lbl { display: block; margin-top: 8px; font-size: 15px; color: hsl(220 26% 78%); }
@media (max-width: 880px) { .svc-why-grid { grid-template-columns: 1fr; gap: 36px; } }
.svc-why-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.svc-why-inner .svc-why-head { margin: 0; }
.svc-why-inner .svc-why-text { margin: 20px auto 0; max-width: 64ch; }

/* ---------- Hero body copy (3 original intro paragraphs) ---------- */
.svc-hero-copy { max-width: 64ch; display: flex; flex-direction: column; gap: 16px; margin: 26px 0 0; }
.svc-hero-copy .hero-lede { margin: 0; max-width: none; }
.svc-hero-price { font-size: 18px; font-weight: 600; color: #fff; margin: 28px 0 24px; }
/* Hero subtitle (the original heading-emphasis line, kept inside the H1) */
.svc-page .hero-headline .svc-hero-sub { display: block; margin-top: 14px; font-size: clamp(18px, 1.9vw, 24px); font-weight: 500; letter-spacing: -.01em; color: hsl(263 82% 84%); }
/* Single-benefit layout */
.svc-benefit-grid.single { grid-template-columns: 1fr; max-width: 820px; }

/* ---------- Pricing callout ---------- */
/* ---------- Pricing section ---------- */
/* Extra gap below the heading so the featured card's badge has room to sit
   above the cards without crowding the "Pricing" title. */
.svc-pricing .section-head { margin-bottom: 64px; }
.svc-pricing-more { display: flex; justify-content: center; margin-top: 44px; }

/* More breathing room at the bottom of the hero band under the CTA. */
.svc-page .hero-pricing { padding-bottom: 120px; }
/* Space between the hero intro copy and the CTA button. */
.svc-page .hero .hero-cta-row { margin-top: 40px; }
.svc-pricing-panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  padding: 48px 52px;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  box-shadow: 0 24px 48px -32px hsl(231 60% 20% / .35);
}
.svc-pricing-price { font-family: var(--font-display, inherit); font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.025em; color: hsl(var(--foreground)); line-height: 1.05; }
.svc-pricing-price span { font-size: .5em; font-weight: 600; color: hsl(var(--muted-foreground)); }
.svc-pricing-note { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: hsl(var(--muted-foreground)); max-width: 42ch; }
@media (max-width: 760px) { .svc-pricing-panel { grid-template-columns: 1fr; padding: 36px 30px; gap: 26px; } }

/* ---------- Process layout tweak: cards variant ---------- */
body.svc-proc-cards .proc-grid {
  grid-template-columns: repeat(3, 1fr);
  border-top: 0; gap: 16px;
}
body.svc-proc-cards .proc-item {
  flex-direction: column; gap: 10px; align-items: flex-start;
  border: 1px solid hsl(var(--border)); border-radius: 12px;
  padding: 22px 22px;
}
@media (max-width: 880px) { body.svc-proc-cards .proc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { body.svc-proc-cards .proc-grid { grid-template-columns: 1fr; } }