/* ============================================================
   SERVICE PAGES
   ------------------------------------------------------------
   The design system for service detail pages built on
   <ServiceLayout />. Everything here is scoped under
   `.service-page`, so it cannot affect the Home, About, Contact
   or Services Overview pages.

   Contents
     1. Tokens
     2. Layout primitives   (.svc-container, .svc-section)
     3. Typography          (.svc-kicker, .svc-heading)
     4. Media               (.svc-image)
     5. Hero
     6. Overview
     7. Features
     8. Dashboard showcase
     9. Benefits
    10. Use cases
    11. FAQ
    12. CTA
    13. Responsive
    14. Motion & preferences
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */

.service-page {
  /* Vertical rhythm. Sections pick a step by intent, so the page
     has a cadence instead of one repeated gap. */
  --svc-space-xl: clamp(104px, 11vw, 168px);
  --svc-space-lg: clamp(84px, 8.5vw, 128px);
  --svc-space-md: clamp(64px, 6.5vw, 96px);

  /* Type scale. Mirrors the Homepage: same family, same weights,
     same tight tracking on display sizes. */
  --svc-fs-h1: clamp(38px, 4.4vw, 68px);
  --svc-fs-h2: clamp(30px, 3.2vw, 46px);
  --svc-fs-h3: 17px;
  --svc-fs-lede: clamp(16px, 1.1vw, 18px);
  --svc-fs-body: 15px;

  /* Colour. Drawn from the Homepage palette. */
  --svc-ink: #545c61;
  --svc-ink-strong: #56595e;
  --svc-body: #728187;
  --svc-hairline: #e2edec;
  --svc-dark: #2d565b;
  --svc-dark-ink: rgba(255, 255, 255, 0.74);

  --svc-gap: clamp(40px, 5vw, 84px);

  overflow-x: clip; /* contains the hero's ambient glow */
  background: #fff;
}

/* ------------------------------------------------------------
   2. LAYOUT PRIMITIVES
   ------------------------------------------------------------ */

/* Matches the Homepage container so the pages line up exactly. */
.service-page .svc-container {
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
}

/* The dashboard gets more room than anything else on the page. */
.service-page .svc-container--wide {
  width: min(100% - 48px, 1320px);
}

.service-page .svc-container--narrow {
  width: min(100% - 48px, 780px);
}

.service-page .svc-section--xl {
  padding-block: var(--svc-space-xl);
}
.service-page .svc-section--lg {
  padding-block: var(--svc-space-lg);
}
.service-page .svc-section--md {
  padding-block: var(--svc-space-md);
}

.service-page .svc-section--light {
  background: #fff;
}
.service-page .svc-section--soft {
  background: var(--soft);
}
.service-page .svc-section--dark {
  color: #fff;
  background: linear-gradient(180deg, #4db0b5 0%, #74d7bf 100%);
  /* background: var(--svc-dark); */
}
.service-page .svc-section--brand {
  color: #fff;
  background: linear-gradient(180deg, #4db0b5 0%, #74d7bf 100%);
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */

.service-page .svc-kicker {
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-page .svc-kicker--light,
.service-page .svc-section--dark .svc-kicker {
  color: #a9ebdb;
}

.service-page .svc-heading {
  display: flex;
  flex-direction: column;
}

.service-page .svc-heading--center {
  align-items: center;
  text-align: center;
}

.service-page .svc-heading-title {
  margin: 0;
  max-width: 20ch;
  color: var(--svc-ink);
  font-size: var(--svc-fs-h2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.service-page .svc-section--dark .svc-heading-title {
  color: #fff;
}

/* Narrower than the heading so the two read as separate tiers. */
.service-page .svc-heading-lede {
  margin: 18px 0 0;
  max-width: 46ch;
  color: var(--svc-body);
  font-size: var(--svc-fs-body);
  font-weight: 500;
  line-height: 1.7;
}

.service-page .svc-section--dark .svc-heading-lede {
  color: var(--svc-dark-ink);
}

/* ------------------------------------------------------------
   4. MEDIA
   ------------------------------------------------------------
   A screenshot, shown plainly: no browser chrome, no bezel.
   ------------------------------------------------------------ */

.service-page .svc-image {
  margin: 0;
  min-width: 0;
}

.service-page .svc-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 60px -12px rgba(32, 83, 87, 0.3), 0 8px 20px -6px rgba(32, 83, 87, 0.16);
}

.service-page .svc-image--float img {
  animation: svcFloat 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes svcFloat {
  50% {
    transform: translateY(-12px);
  }
}

/* ------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------ */

.service-page .svc-hero {
  position: relative;
  padding-block: clamp(48px, 5vw, 76px) clamp(80px, 8vw, 120px);
  background: #fff;
  isolation: isolate;
}

/* Ambient depth rather than a flat white slab. */
.service-page .svc-hero::before {
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: min(70vw, 820px);
  height: min(70vw, 820px);
  background: radial-gradient(
    circle at 60% 45%,
    rgba(115, 212, 188, 0.26) 0%,
    rgba(75, 176, 181, 0.12) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  content: "";
  pointer-events: none;
}

.service-page .svc-hero-inner {
  display: flex;
  align-items: center;
  gap: var(--svc-gap);
}

.service-page .svc-hero-copy {
  flex: 1 1 46%;
  min-width: 0;
}

.service-page .svc-hero-image {
  flex: 1 1 54%;
}

.service-page .svc-hero-title {
  margin: 0;
  color: var(--svc-ink-strong);
  font-size: var(--svc-fs-h1);
  font-weight: 750;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.service-page .svc-hero-lede {
  margin: 24px 0 0;
  max-width: 40ch;
  color: #6f8086;
  font-size: var(--svc-fs-lede);
  font-weight: 500;
  line-height: 1.65;
}

.service-page .svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* Stats as a quiet rule-separated rail, not badges over the image. */
.service-page .svc-hero-stats {
  display: flex;
  gap: clamp(24px, 3vw, 44px);
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--svc-hairline);
}

.service-page .svc-hero-stat dt {
  color: var(--svc-ink-strong);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.service-page .svc-hero-stat dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   6. OVERVIEW
   ------------------------------------------------------------ */

.service-page .svc-overview-top {
  display: flex;
  gap: var(--svc-gap);
  align-items: flex-start;
}

.service-page .svc-overview-heading {
  flex: 1 1 42%;
}

.service-page .svc-overview-heading .svc-heading-title {
  max-width: 14ch;
}

.service-page .svc-overview-intro {
  flex: 1 1 58%;
  min-width: 0;
}

.service-page .svc-overview-lede {
  margin: 0;
  color: var(--svc-ink);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.55;
}

.service-page .svc-overview-definition {
  margin: 20px 0 0;
  color: var(--svc-body);
  font-size: var(--svc-fs-body);
  line-height: 1.75;
}

/* Numbered process. Rules and space instead of cards. */
.service-page .svc-steps {
  display: flex;
  gap: 0;
  margin: clamp(56px, 6vw, 80px) 0 0;
  padding: 0;
  border-top: 1px solid var(--svc-hairline);
  list-style: none;
}

.service-page .svc-step {
  flex: 1 1 0;
  padding: 32px 40px 0 0;
}

.service-page .svc-step + .svc-step {
  padding-left: 40px;
  border-left: 1px solid var(--svc-hairline);
}

.service-page .svc-step-index {
  display: block;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.service-page .svc-step-icon {
  margin-top: 20px;
  color: var(--teal-dark);
}

.service-page .svc-step-title {
  margin: 14px 0 0;
  color: var(--svc-ink);
  font-size: var(--svc-fs-h3);
  font-weight: 700;
}

.service-page .svc-step-text {
  margin: 8px 0 0;
  color: var(--svc-body);
  font-size: 13px;
  line-height: 1.65;
}

.service-page .svc-audience {
  display: flex;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(48px, 5vw, 68px);
  padding-top: 32px;
  border-top: 1px solid var(--svc-hairline);
}

.service-page .svc-audience-label {
  flex: 0 0 auto;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-page .svc-audience-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-page .svc-audience-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--svc-body);
  font-size: 13px;
  font-weight: 550;
}

.service-page .svc-audience-list svg {
  flex: none;
  color: var(--teal);
}

/* ------------------------------------------------------------
   7. FEATURES
   ------------------------------------------------------------ */

.service-page .svc-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 4vw, 56px) var(--svc-gap);
  margin: clamp(56px, 6vw, 76px) 0 0;
  padding: 0;
  list-style: none;
}

/* Three up, borderless: the icon and title carry the hierarchy. */
.service-page .svc-feature {
  flex: 1 1 clamp(240px, 26%, 320px);
  min-width: 0;
}

.service-page .svc-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--teal-dark);
  background: #e9f7f3;
}

.service-page .svc-feature-title {
  margin: 20px 0 0;
  color: var(--svc-ink);
  font-size: var(--svc-fs-h3);
  font-weight: 700;
}

.service-page .svc-feature-text {
  margin: 9px 0 0;
  max-width: 38ch;
  color: var(--svc-body);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   8. DASHBOARD SHOWCASE
   ------------------------------------------------------------ */

.service-page .svc-dashboard .svc-heading-lede {
  color: var(--svc-dark-ink);
}

.service-page .svc-dashboard-image {
  max-width: 80%;
  margin: auto;
  margin-top: clamp(48px, 5vw, 72px);
}

/* Deeper shadow so the shot lifts off the dark ground. */
.service-page .svc-dashboard-image img {
  box-shadow: 0 40px 80px -16px rgba(0, 0, 0, 0.45);
}

.service-page .svc-dashboard-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(24px, 3vw, 44px);
  margin: clamp(40px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.service-page .svc-dashboard-highlights li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--svc-dark-ink);
  font-size: 13px;
  font-weight: 550;
}

.service-page .svc-dashboard-highlights svg {
  flex: none;
  color: #fff;
} 

/* ------------------------------------------------------------
   9. BENEFITS
   ------------------------------------------------------------ */

.service-page .svc-benefits-inner {
  display: flex;
  gap: var(--svc-gap);
  align-items: flex-start;
}

.service-page .svc-benefits-heading {
  position: sticky;
  top: 96px;
  flex: 1 1 40%;
}

.service-page .svc-benefits-heading .svc-heading-title {
  max-width: 12ch;
}

.service-page .svc-benefit-list {
  flex: 1 1 60%;
  margin: 0;
  min-width: 0;
  border-top: 1px solid var(--svc-hairline);
}

/* Ruled rows: the metric leads, the copy follows. No cards. */
.service-page .svc-benefit {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
  padding: 26px 0;
  border-bottom: 1px solid var(--svc-hairline);
}

.service-page .svc-benefit-metric {
  flex: 0 0 clamp(88px, 9vw, 124px);
  color: var(--teal-dark);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.service-page .svc-benefit-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

.service-page .svc-benefit-body strong {
  color: var(--svc-ink);
  font-size: var(--svc-fs-h3);
  font-weight: 700;
}

.service-page .svc-benefit-body span {
  color: var(--svc-body);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   10. USE CASES
   ------------------------------------------------------------ */

.service-page .svc-usecase-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--svc-gap);
  margin: clamp(48px, 5vw, 68px) 0 0;
  padding: 0;
  list-style: none;
}

/* Two up and ruled — a different rhythm from the three-up features
   above, so the page doesn't repeat the same grid twice. */
.service-page .svc-usecase {
  display: flex;
  flex: 1 1 clamp(280px, 44%, 480px);
  gap: 16px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--svc-hairline);
  min-width: 0;
}

.service-page .svc-usecase-icon {
  flex: none;
  margin-top: 2px;
  color: var(--teal-dark);
}

.service-page .svc-usecase-title {
  margin: 0;
  color: var(--svc-ink);
  font-size: 15.5px;
  font-weight: 700;
}

.service-page .svc-usecase-text {
  margin: 6px 0 0;
  color: var(--svc-body);
  font-size: 13.5px;
  line-height: 1.65;
}

/* ------------------------------------------------------------
   11. FAQ
   ------------------------------------------------------------ */

.service-page .svc-faq-inner {
  display: flex;
  gap: var(--svc-gap);
  align-items: flex-start;
}

.service-page .svc-faq-heading {
  position: sticky;
  top: 96px;
  flex: 1 1 38%;
}

.service-page .svc-faq-heading .svc-heading-title {
  max-width: 12ch;
}

.service-page .svc-faq-list {
  flex: 1 1 62%;
  min-width: 0;
}

/* ------------------------------------------------------------
   12. CTA
   ------------------------------------------------------------ */

.service-page .svc-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.service-page .svc-cta-title {
  margin: 0;
  color: #fff;
  font-size: var(--svc-fs-h2);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.service-page .svc-cta-lede {
  margin: 18px 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--svc-fs-body);
  line-height: 1.7;
}

.service-page .svc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.service-page .svc-cta-actions .btn-primary {
  color: var(--teal-dark);
  background: #fff;
}

.service-page .svc-cta-actions .btn-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------ */

/* Laptop: relax the widest container before the columns collapse. */
@media (max-width: 1240px) {
  .service-page .svc-step {
    padding-right: 24px;
  }
  .service-page .svc-step + .svc-step {
    padding-left: 24px;
  }
}

/* Tablet: split layouts fold, but the reading order is chosen —
   copy always leads, the visual follows. */
@media (max-width: 1024px) {
  .service-page .svc-hero-inner,
  .service-page .svc-overview-top,
  .service-page .svc-benefits-inner,
  .service-page .svc-faq-inner {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(36px, 5vw, 52px);
  }

  .service-page .svc-benefits-heading,
  .service-page .svc-faq-heading {
    position: static;
  }

  .service-page .svc-hero-title,
  .service-page .svc-heading-title,
  .service-page .svc-overview-heading .svc-heading-title,
  .service-page .svc-benefits-heading .svc-heading-title,
  .service-page .svc-faq-heading .svc-heading-title {
    max-width: 22ch;
  }

  /* The process becomes rows rather than four cramped columns. */
  .service-page .svc-steps {
    flex-direction: column;
    gap: 0;
  }

  .service-page .svc-step {
    padding: 26px 0;
    border-bottom: 1px solid var(--svc-hairline);
  }

  .service-page .svc-step + .svc-step {
    padding-left: 0;
    border-left: 0;
  }

  .service-page .svc-step-icon {
    margin-top: 12px;
  }

  .service-page .svc-feature {
    flex-basis: clamp(240px, 40%, 340px);
  }
}

/* Mobile: rethought, not just stacked. */
@media (max-width: 768px) {
  .service-page .svc-container,
  .service-page .svc-container--wide,
  .service-page .svc-container--narrow {
    width: min(100% - 40px, 1180px);
  }

  .service-page .svc-hero {
    padding-top: 32px;
  }

  .service-page .svc-hero-title,
  .service-page .svc-heading-title,
  .service-page .svc-hero-lede,
  .service-page .svc-heading-lede,
  .service-page .svc-feature-text {
    max-width: none;
  }

  /* Stats wrap to a 3-up rail instead of overflowing. */
  .service-page .svc-hero-stats {
    flex-wrap: wrap;
    gap: 20px 28px;
    margin-top: 36px;
  }

  .service-page .svc-audience {
    flex-direction: column;
    gap: 16px;
  }

  .service-page .svc-benefit {
    flex-direction: column;
    gap: 8px;
    padding: 22px 0;
  }

  .service-page .svc-benefit-metric {
    flex-basis: auto;
  }

  .service-page .svc-usecase {
    flex-basis: 100%;
  }

  .service-page .svc-image img {
    border-radius: 9px;
  }
}

/* Phones only. A full-bleed button reads as an intentional target on a
   handset but looks broken stretched across a tablet, so this is kept
   below the tablet breakpoint rather than bundled with it. */
@media (max-width: 600px) {
  .service-page .svc-hero-actions,
  .service-page .svc-cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .service-page .svc-hero-actions .btn,
  .service-page .svc-cta-actions .btn {
    width: 100%;
  }

  .service-page .svc-dashboard-image {
    max-width: 100%;
    margin: auto;
    margin-top: clamp(48px, 5vw, 72px);
  }
}

/* ------------------------------------------------------------
   14. MOTION & PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .service-page .svc-image--float img {
    animation: none;
  }
}