/* ==========================================================================
   Singularity Hypertech — SERVICES PAGE
   Figma: Service Page (1452:5476) — 1440x10777.

   Almost every band on this page is an existing section reused as-is:
     .ab-intro  / .ab-solve       -> css/about/about.css   (intro band, experts band)
     .choose / .choose-*          -> css/home/home.css     (seven service pillars)
     .process / .timeline / .tl-* -> css/home/home.css     (engagement models)
     .brands / .marquee           -> css/shared.css        (client logos)
     .insights / .insight-*       -> css/shared.css        (related articles)
     .cta / .orb-*                -> css/shared.css        (closing CTA)
   Only the hero below is specific to this page, plus two small additions to
   the .choose panel body, which on this page carries a paragraph and a link
   instead of the home page's two columns.
   ========================================================================== */

/* ==========================================================================
   HERO — Hero Section (1452:6421), 1440x665, full-bleed artwork
   ========================================================================== */
.svc-hero {
  position: relative;
  min-height: 665px;
  display: flex;
  /* Figma: the title block sits low in the 665px frame (foot at y~552) */
  align-items: flex-end;
  padding: 180px 0 110px;
  background: #0b0708;
  overflow: hidden;
  isolation: isolate;
}
.svc-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
/* the artboard darkens the plate under the type so the headline stays legible */
.svc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(11, 7, 8, 0.4) 0%,
    rgba(11, 7, 8, 0.6) 45%,
    rgba(11, 7, 8, 0.82) 100%
  );
}
.svc-hero-inner {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
/* Figma "hero-title": Inter Tight 500 72px, -4.17px tracking, one gradient
   across all lines
   (167.27deg #f0e4ff -> #f9f4ff -> white 40%), each sentence on its own line */
.svc-hero h1 {
  margin: 0;
  /* 720px box, right-aligned in the container -> starts at x~656 like Figma
     and breaks "End-to-End Data & AI / Capabilities. / One Unified Ecosystem." */
  width: 720px;
  max-width: 100%;
  font-family: var(--font-tight);
  font-size: 72px; /* Figma value (user: "make it look like this") */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.058em; /* -4.17px at 72px */
  background: linear-gradient(167.27deg, #f0e4ff 2.68%, #f9f4ff 30.5%, rgba(255, 255, 255, 0.4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.svc-hero h1 span {
  display: block;
}

/* ==========================================================================
   SEVEN SERVICE PILLARS — additions to the shared .choose panel
   The home page's panels hold two columns of lists; here each panel carries a
   paragraph and a "Read more" link, so only these two rules are new.
   ========================================================================== */
.choose-body p {
  align-self: stretch;
  margin: 0;
  max-width: 720px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 22px;
  color: #c2c2c2;
}
.choose-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.choose-more svg {
  width: 16px;
  height: 16px;
}
.choose-more:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* the 720px title box is a desktop composition; below that it fills the row */
@media (max-width: 1080px) {
  .svc-hero h1 { width: auto; }
}