/* Sogody — service detail page styles, matched to the live
   sogody.com/services/<slug>/ layout (full-page reference screenshot).
   Tokens: Cabinet Grotesk headings, 1240px container, #67be83 accent. */

.service-detail-page { padding-top: 100px; overflow: visible; }
.sd-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---- Hero: dark rounded banner with copy left, video right,
        divider + trusted-by INSIDE the card ---- */
.sd-banner {
  background: linear-gradient(150deg, #242329 0%, #2b2733 55%, #3a2f4a 100%);
  border-radius: 24px;
  padding: 48px 48px 28px;
  color: #f8f8f8;
}
.sd-banner-top { display: flex; gap: 40px; align-items: center; justify-content: space-between; }
.sd-banner-copy { max-width: 480px; }
.sd-banner-copy h1 {
  font-family: "Cabinet Grotesk";
  font-weight: 500;
  font-size: 34px;
  line-height: 42px;
  color: #fff;
  margin: 0 0 18px;
}
.sd-banner-copy h1 .green { color: #67be83; }
.sd-banner-copy .subtitle { color: #d6d6d6 !important; font-size: 16px; line-height: 24px; margin-bottom: 28px; }
/* CTA in dark cards: the circular button carries a built-in -20px overlap, so
   we add a matching +20px left margin to land the circle exactly on the text
   column's left edge (margin-left:0 made the circle protrude ~20px left). */
.sd-banner .init-circular-div,
.sd-cta-cell .init-circular-div {
  width: fit-content !important;
  justify-content: flex-start !important;
  margin-left: 20px !important;
}
/* in the CTO cell, line the circle up with the card's inner content (30px pad) */
.sd-cta-cell .init-circular-div { margin-left: 50px !important; }
.sd-banner-media {
  flex: 0 0 44%;
  max-width: 470px;
  border-radius: 16px;
  overflow: hidden;
}
.sd-banner-media video { width: 100%; height: 320px; object-fit: cover; display: block; }
.sd-banner-divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); margin: 36px 0 10px; }
/* trusted-by sits INSIDE the dark banner — strip its own dark box so the
   banner gradient shows straight through */
.sd-banner .clients-carousel {
  background-color: transparent !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  /* Keep the "Trusted by" band tight against the divider: cap its top/bottom
     padding at 12px (base is 20px) and zero the inner container's vertical pad. */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
/* align "Trusted by:" + logos to the hero text column (strip the carousel's
   own left padding + centering) */
.sd-banner .clients-carousel .carousel-container {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
}
/* Zero the logo track's own 20px vertical padding (sogody.css sets it globally,
   overriding the mobile reset) so the logos don't balloon the band height and
   push "Trusted by:" away from the divider. */
.sd-banner .clients-carousel .slider-track {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* match the landing-page "Trusted by" density: sogody.css spreads each logo
   with 0 28px padding, which shows fewer logos and reads sparser than home.
   Drop it so the logos sit tight like the homepage band. */
.sd-banner .clients-carousel .logo-item {
  padding: 0 !important;
}
/* trusted-by logos render as-authored (like the homepage band): the source
   SVGs are already white-on-transparent, so the brightness/invert "lift" was
   redundant — and it corrupted two-tone logos like brainlabs by turning their
   meant-to-be-hidden dark parts white. So the clients-carousel is excluded here. */
.sd-banner .updates-carousel-section img,
.sd-banner .carousel-img { filter: brightness(0) invert(1) opacity(0.82); }
.sd-banner .carousel-container p, .sd-banner .trusted-by { color: #d6d6d6 !important; }
@media (max-width: 991px) {
  .sd-banner { padding: 32px 24px 6px; }
  .sd-banner-top { flex-direction: column; align-items: flex-start; }
  .sd-banner-media { max-width: 100%; flex-basis: auto; width: 100%; }
  .sd-banner-copy h1 { font-size: 28px; line-height: 36px; margin-bottom: 10px; }
  /* Tighten the stacked hero on mobile so title, copy, CTA, divider and the
     "Trusted by" band don't sprawl down the screen. */
  .sd-banner-copy .subtitle { margin-bottom: 18px; }
  .sd-banner-divider { margin: 20px 0 8px; }
}

/* ---- Optional intro paragraph (sits between hero and capabilities) ---- */
.sd-intro { max-width: 880px; margin: 64px auto 0; padding: 0 20px; text-align: center; }
.sd-intro p {
  font-family: "HelveticaNeueLT Pro 55 Roman", Arial, sans-serif;
  font-size: 19px;
  line-height: 30px;
  color: #4a4a4a;
  margin: 0;
}
@media (max-width: 600px) {
  .sd-intro { margin-top: 48px; }
  .sd-intro p { font-size: 17px; line-height: 27px; }
}

/* ---- Capabilities ("Building something great?") ---- */
.sd-caps { max-width: 1240px; margin: 110px auto 0; padding: 0 20px; }
.sd-caps-heading {
  font-family: "Cabinet Grotesk" !important;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  margin: 0 auto 55px;
  max-width: 460px;
}
.sd-caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sd-cap-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sd-cap-card-img { width: 100%; height: 215px; background-size: cover; background-position: center top; background-repeat: no-repeat; background-color: #fafafa; }
.sd-cap-card-img.has-illo { background-color: #fff; height: 250px; display: flex; align-items: center; justify-content: center; padding: 10px 4px 0; }
.sd-cap-card-img.has-illo svg { width: 100%; height: 100%; display: block; }
.sd-cap-card-body { padding: 18px 22px 26px; }
.sd-cap-card-body h3 {
  font-family: "HelveticaNeueLT Pro 55 Roman", Arial, sans-serif;
  font-size: 20px;
  line-height: 26px;
  margin: 0 0 10px;
  color: #2b2b2b;
}
.sd-cap-card-body p {
  font-family: "HelveticaNeueLT Pro 55 Roman", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #4a4a4a;
  margin: 0;
}
/* CTO cell: green swoosh card on top, "Set up a Meeting" CTA below it */
.sd-cta-cell { display: flex; flex-direction: column; gap: 26px; }
.sd-cta-card {
  background: linear-gradient(150deg, #2a2630 0%, #3a2f4a 100%);
  border-radius: 20px 20px 110px 20px;
  color: #fff;
  padding: 30px 30px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  flex: 1;
}
.sd-cta-card-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.2); }
.sd-cta-card-name { font-family: "HelveticaNeueLT Pro 45 Lt", Arial, sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.65); margin: 0 0 8px; }
.sd-cta-card-line { font-family: "Cabinet Grotesk"; font-weight: 500; font-size: 24px; line-height: 30px; margin: 0; color: #fff; }
@media (max-width: 991px) { .sd-caps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sd-caps-grid { grid-template-columns: 1fr; } }

/* ---- Process (faithful WWOTE port): title left + subtitle right, 5 columns
        divided by hairlines, pills staggered in PAIRS, styled hover bubble.
        Most styling comes from compiled .wwo-te; these are page-local tweaks. */
.service-detail-page .wwo-te { max-width: 1240px; margin: 120px auto; padding: 0 20px; }
.service-detail-page .wwo-te .cards-container { width: 100%; }
.service-detail-page .wwo-te .solution-card { padding: 0 18px; }
.service-detail-page .wwo-te .solution-card .block-subtitle { font-size: 13px; margin: 0 0 8px; }
.service-detail-page .wwo-te .solution-card .img-set-height { object-fit: contain; object-position: left center; }
.service-detail-page .wwo-te .sd-pill-wrap { position: relative; width: 100%; }
@media (max-width: 900px) {
  .service-detail-page .wwo-te { margin: 80px auto; }
  .service-detail-page .wwo-te .row.flex-nowrap { flex-wrap: wrap !important; }
  .service-detail-page .wwo-te .col { flex: 0 0 100%; max-width: 100%; }
  .service-detail-page .wwo-te .solution-card { border-left: 0 !important; margin-bottom: 28px !important; }
  .service-detail-page .wwo-te .solution-card img { margin-top: 14px !important; }
  /* center the process pills within each full-width step on mobile */
  .service-detail-page .wwo-te .solution-card .img-set-height { object-position: center center; }
}

/* ---- Technologies: PAGE-WIDE wave background (what-we-build-bg-image),
        section breaks out of the 1240 container to span the viewport ---- */
.section-technologies-used {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 40px 0 120px;
}
/* pull technologies up tight under the process section */
.service-detail-page .wwo-te { margin-bottom: 56px; }
.section-technologies-used::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/images/what-we-build-bg-image.webp') center / 100% 95% no-repeat;
}
.sd-tech {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  background: none;
}
.sd-tech-heading {
  font-family: "Cabinet Grotesk" !important;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  margin: 0 auto 48px;
  max-width: 570px;
}
@media (max-width: 1000px) {
  .sd-tech-heading br { display: none; }
}
/* all six tech cards on a single row, bigger icons */
.sd-tech-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; max-width: 1240px; margin: 0 auto; }
.sd-tech-card {
  background: #fff;
  border-radius: 14px;
  min-height: 178px;
  padding: 26px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
}
/* Logos: every icon sits in the SAME fixed 60x44 box (the Domain-Specific
   footprint) and is centered via object-fit:contain, so all six render at a
   consistent size regardless of the source logo's aspect ratio. Grayscaled to
   match the monochrome treatment of the tech-page icons. */
.sd-tech-card img { width: 60px; height: 44px; object-fit: contain; filter: grayscale(1); }
/* AI & CX logos come from tightly-cropped source files, so they fill the box and
   look bigger than the tech-page icons (whose PNGs have built-in padding, ~24px
   rendered). Scale them down to match the Ruby/tech icon size, keeping the same
   60x44 box so the card layout is unchanged. */
[data-sd-theme="ai"] .sd-tech-card img { transform: scale(0.55); }
[data-sd-theme="cx"] .sd-tech-card img { transform: scale(0.72); }
.sd-tech-card .sd-tech-mono {
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cabinet Grotesk", Arial, sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: -0.01em;
  color: #4d8e62; background: #eef7f1;
}
.sd-tech-card h3 { font-family: "HelveticaNeueLT Pro 55 Roman", Arial, sans-serif; font-size: 18px; line-height: 1.1; margin: 0; color: #2b2b2b; text-align: center; }
.sd-tech-card p { font-family: "HelveticaNeueLT Pro 45 Lt", Arial, sans-serif; font-size: 13px; line-height: 17px; color: #8a8a8a; margin: 0; text-align: center; }
@media (max-width: 767px) { .sd-tech-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Platforms gallery — full-width scroll-snap track, big centered card,
        floating control pill (mirrors the Company page CoGallery) ---- */
/* Break the gallery out of the page's 1240px container to span the full viewport */
.service-detail-page .mshs-services { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.sd-slider-wrapper { position: relative; padding-bottom: 44px; }
.sd-gallery-track {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 10px 9%; scrollbar-width: none;
}
.sd-gallery-track::-webkit-scrollbar { display: none; }
.sd-gallery-track .slide-container { flex: 0 0 82%; min-width: 0; scroll-snap-align: center; padding: 0; }
.sd-gallery-track .slide-container .content-box { height: 100%; min-height: 460px; }
@media (max-width: 991px) {
  .sd-gallery-track { padding: 10px 5%; }
  .sd-gallery-track .slide-container { flex-basis: 90%; }
}
/* Whole-card tap link — only active on mobile, where the copy is hidden */
.sd-slide-tap { display: none; }
@media (max-width: 767px) {
  /* hide the copy; keep only the background image */
  .sd-gallery-track .slide-container .content-box { position: relative; min-height: 220px; padding: 0; }
  .sd-gallery-track .slide-container .content-box > *:not(.sd-slide-tap) { display: none !important; }
  /* make the entire card a link to the product site */
  .sd-slide-tap { display: block; position: absolute; inset: 0; z-index: 3; }
}

/* floating control pill straddling the card bottom edge */
.sd-slider-controls {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px;
  display: flex; align-items: center; gap: 14px; z-index: 5;
}
.sd-slider-controls .autoplay-btn {
  width: 48px; height: 48px; margin: 0; border: 0; background: #fff; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sd-dots {
  display: flex; align-items: center; gap: 12px; list-style: none; margin: 0;
  height: 48px; padding: 0 20px;
  background: #fff; border-radius: 40px; box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.sd-dots li { display: flex; align-items: center; line-height: 0; }
.sd-dots li button {
  width: 10px; height: 10px; border-radius: 50%;
  border: 0; padding: 0; margin: 0; background: #84cb9a; text-indent: -9999px; overflow: hidden; cursor: pointer;
  transition: all 0.3s ease;
}
.sd-dots li.active button { width: 32px; border-radius: 6px; background: #67be83; }

/* ============================================================
   PER-SERVICE COLOR IDENTITY
   The brand keeps a single green accent; differentiation comes
   from the dark hero/CTO gradient tilt and the technologies
   section's pastel band (drawn from the DS pastel set).
   ============================================================ */
/* --- AI & Data Systems: brand green (#267A5C) --- */
[data-sd-theme="ai"] .sd-banner { background: linear-gradient(150deg, #1c4a38 0%, #21664c 52%, #267A5C 100%); }
[data-sd-theme="ai"] .sd-banner-copy h1 .green { color: #bde8d1 !important; }
[data-sd-theme="ai"] .sd-cta-card { background: linear-gradient(160deg, #18241e 0%, #1f5440 50%, #2e7d5d 100%); }
[data-sd-theme="ai"] .sd-tech-card .sd-tech-mono { color: #267A5C; background: #e6f2ec; }

/* --- Customer Experience: warm olive (#61592D) --- */
[data-sd-theme="cx"] .sd-banner { background: linear-gradient(150deg, #28250f 0%, #423c1c 55%, #61592D 100%); }
[data-sd-theme="cx"] .sd-cta-card { background: linear-gradient(150deg, #423c1c 0%, #61592D 100%); }
[data-sd-theme="cx"] .sd-tech-card .sd-tech-mono { color: #61592D; background: #f1efe1; }

/* ============================================================
   MOBILE: expand content to the header-banner width
   The header pill sits at 16px side margins (the page wrapper's
   padding). Each section wrapper below adds ANOTHER 20px, so its
   content is inset to 36px and looks narrower than the banner.
   Drop that extra 20px on phones so cards/sections line up with
   the header's edges. Inner elements (process pills, grids, text)
   keep their own responsive sizing.
   ============================================================ */
@media (max-width: 767px) {
  .sd-container,
  .sd-caps,
  .service-detail-page .wwo-te { padding-left: 0; padding-right: 0; }
  /* Full-bleed tech band: re-pad to 16px so its grid matches too. */
  .sd-tech { padding-left: 16px; padding-right: 16px; }
  /* CTA sits inside the 16px page wrapper here, so drop the shared 16px it gets
     for full-bleed pages (otherwise it double-insets to 32px). */
  .service-detail-page .cta-meet .cta-meet-container { padding-left: 0; padding-right: 0; }
}