/* ==========================================================================
   Singularity Hypertech — SERVICE DETAIL pages
   Shared by every page under /services/<slug>/. Figma: AIML (1521:2091).

   Reused wholesale, nothing re-written:
     .svc-hero                    -> css/services/services.css  (hero band)
     .ab-intro                    -> css/about/about.css        (intro band)
     .ab-philosophy / .ab-phil-*  -> css/about/about.css        (platform expertise)
     .ab-adds / .ab-add-card      -> css/about/about.css        (why choose)
     .why / .why-cell / .why-num  -> css/home/home.css          (business outcomes)
     .brands / .insights / .cta   -> css/shared.css
     [data-scroll-ink]            -> css/shared.css + js/main.js

   New below: the six Industry Offerings rows, plus small extensions where
   this page uses a reused band slightly differently (a list instead of a
   paragraph in the philosophy items, a four-card bento instead of three
   equal cards, a button under the intro copy).
   ========================================================================== */

/* ==========================================================================
   INTRO — the About band gains a button under the copy
   ========================================================================== */
.ab-intro-actions {
  margin: 34px 0 0;
  /* a real gap between the two buttons: whitespace alone collapsed to nothing once
     they stack full-width on small screens, so they sat edge to edge */
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ab-intro-actions .btn {
  border-radius: 999px;
  border-color: #b9b1f5;
  font-size: 16px;
  padding: 13px 26px;
}

/* ==========================================================================
   OUR INDUSTRY OFFERINGS — Frame 2147256812 (1522:3257), 1440x3884
   Six rows: artwork left, copy right, hairline between.
   ========================================================================== */
.offerings {
  background: #fff;
  padding: 100px 0 110px;
}
.offerings .section-head {
  margin-bottom: 56px;
}
/* site-wide section heading size on desktop (tablet/phone come from
   typography.css via .section-head h2) */
@media (min-width: 1081px) {
  .offerings .section-head h2 {
    font-size: 65px;
    line-height: 1.06;
  }
}
/* --- the stack ------------------------------------------------------------
   Every row is a sticky card sharing one parent, so each one pins as it
   reaches the top and STAYS pinned until the whole list has scrolled past.
   Later rows sit later in the DOM, so they paint over the ones already
   pinned — that is the overlap.

   All cards pin at the SAME offset and are the same height, so an incoming
   card covers the one beneath completely rather than leaving a stepped edge.
   No radius, no border, no shadow: the card is a plain opaque panel and the
   artwork's own edge is what you see travelling up the screen.
   Cards need an opaque surface or the one beneath shows straight through. */
.offer-rows {
  display: block;
  padding-bottom: 40px;
}
/* Same rows as the industry pages (.id-offering): a hairline between rows,
   the artwork 604x431 inset 60px, 87px to the copy */
.offer-row {
  position: sticky;
  top: 104px;
  display: grid;
  grid-template-columns: minmax(0, 604px) minmax(0, 1fr);
  gap: 87px;
  align-items: center;
  padding: 62px 0 62px 60px;
  border-top: 1px solid #e6e6ec;
  background: #fff;
  /* one height for every card, so each fully hides the card underneath
     (border-box: carries the 124px of padding on top of the 431px artwork) */
  min-height: 560px;
}
.offer-row:last-child {
  border-bottom: 1px solid #e6e6ec;
}

/* anyone who has asked for less motion gets the plain list */
@media (prefers-reduced-motion: reduce) {
  .offer-row { position: static; }
}

.offer-media {
  border-radius: 20px;
  overflow: hidden;
  background: var(--grey-bg);
  aspect-ratio: 604 / 431;
}
.offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.offer-row:hover .offer-media img {
  transform: scale(1.035);
}
.offer-body h3 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 37px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #03020b;
}
.offer-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offer-list li {
  position: relative;
  padding-left: 34px;
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.45;
  color: #05011c;
}
/* ringed lavender check in front of every line (same icon as the
   "What we deliver" lists) */
.offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(../../images/check-ring.svg) center / contain no-repeat;
}
/* "Contact …" buttons are the Figma outlined pill: white, violet 1.5px rim,
   dark label (same as the industry offerings) */
.offer-cta {
  margin-top: 32px;
  min-width: 229px;
  min-height: 56px;
  padding: 0 28px;
  justify-content: center;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #05011c;
  background: transparent;
  border: 1.5px solid #6766ff;
  border-radius: 999px;
  box-shadow: none;
}
.offer-cta:hover {
  background: rgba(103, 102, 255, 0.06);
  color: #6766ff;
}

/* ==========================================================================
   PLATFORM EXPERTISE — Awards and Recognition Section in the Figma
   Copy column 704 wide; the list sits at left 484.65 of the artboard
   (420px into our 1312 container), 755 wide, ending at x 1240. Items carry a
   bullet list instead of a paragraph: native discs, 24px indent, 12px apart.
   ========================================================================== */
.ab-philosophy .ab-phil-head {
  max-width: 704px;
}
.ab-philosophy .ab-phil-list {
  width: 755px;
  margin-left: clamp(0px, calc(100% - 892px), 420px);
}
.ab-philosophy .ab-phil-icon img {
  width: 64px;
  height: 64px;
}
.ab-philosophy .ab-phil-row h3 {
  font-size: 35px;
  line-height: 1.2;
}
.phil-list {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phil-list li {
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.5;
  color: #e1e2e5;
}

/* ==========================================================================
   WHY CHOOSE — four cards instead of three, laid out as a bento
   Tall card on the left, two stacked to its right, one wide across the foot.
   ========================================================================== */
.ab-adds-grid--bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
}
.ab-adds-grid--bento > .ab-add-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.ab-adds-grid--bento > .ab-add-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.ab-adds-grid--bento > .ab-add-card:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.ab-adds-grid--bento > .ab-add-card:nth-child(2),
.ab-adds-grid--bento > .ab-add-card:nth-child(3) {
  min-height: 380px;
}
/* the wide foot card, as the home bento's "8+ countries served" (bento-e):
   white, #e1e2e5 hairline, copy and badges centred on one row */
.ab-add-card--wide {
  grid-column: 2 / span 2;
  grid-row: 2;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e1e2e5;
}
.ab-add-card--wide .ab-add-foot {
  max-width: 620px;
  gap: 0;
}
/* the badge strip, framed in the same pill as the home flags */
.ab-add-badges {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 37px;
  padding: 0 4px;
  border: 0.2px solid #e1e2e5;
  border-radius: 13.76px;
  background: #fffbf4;
}
.ab-add-badges img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1.5px #fffbf4;
}
.ab-add-badges img + img {
  margin-left: -8px;
}

/* ==========================================================================
   BUSINESS OUTCOMES — the .why grid, reused
   On the home page this slot holds a short numeral ("300+", "AI", "E2E"); on
   the service pages it holds a word ("Autonomous", "Production"), which at the
   home size runs straight out of a half-width mobile cell. Keep the artboard
   size on desktop, let it shrink with the viewport, and allow a long word to
   wrap rather than overflow.
   ========================================================================== */
.why-num {
  font-size: 58px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   HERO — the two buttons now sit under the heading (moved up from the
   intro band), sized like every other hero on the site: 60px pills,
   220px primary / 225px frosted-white.
   ========================================================================== */
.svc-hero-copy {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.svc-hero-actions .btn {
  min-height: 60px;
  padding: 0 22px;
  justify-content: center;
}
.svc-hero-actions .btn-primary { min-width: 220px; }
.svc-hero-actions .btn-glass { min-width: 225px; }
@media (max-width: 560px) {
  .svc-hero-actions { width: 100%; gap: 12px; }
  .svc-hero-actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   INTRO — bigger logo so the mark actually reads (was 118px in a 160px rail)
   ========================================================================== */
.ab-intro-grid {
  grid-template-columns: 220px minmax(0, 1fr);
}
.ab-intro-mark img {
  width: 200px;
}
@media (max-width: 1080px) {
  .ab-intro-mark img { width: 170px; }
}