/* ==========================================================================
   Section: Services (the "Full Service" dark section with service cards)
   ========================================================================== */
   
.fullservice__header {
  max-width: 790px;
  margin-bottom: 70px;
}
/* Centered variant — heading + text centered above the cards */
.fullservice__header--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.fullservice__title {
  font-size: var(--title-xl);
  line-height: var(--title-xl-lh);
  letter-spacing: -2px;
  margin-bottom: 24px;
  background: var(--bg-diamond-gradient, linear-gradient(to bottom right, #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) top right / 50% 50% no-repeat);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fullservice__body {
  font-size: var(--body-md);
  color: var(--text-light);
  line-height: var(--body-md-lh);
  width: 100%;
  max-width: 660px;
}

/* Scroll bar — "＋ ＋  Scroll to explore more  ＋ ＋" across the top (homepage) */
.fullservice__scrollbar {
  display: flex;
  padding: 12px 50px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 100px;
}
.fullservice__plus {
  display: inline-flex;
  color: var(--icon-light);
}
.fullservice__scroll-text {
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  color: var(--bg-primary);
}
/* Homepage: when the scroll bar is present it should ride near the top, so trim
   the section's big top padding. The bar's own margin-bottom keeps the gap to
   the heading below (the "bottom padding" under the scroll text). */
.section--services:has(.fullservice__scrollbar) { padding-top: 0; padding-bottom: 150px; }
/* Keep content above the decorative background curve (.section__curve, z-index:0). */
.section--services > .container { position: relative; z-index: 1; }

.service-card-container{
 width: 100%;
 display: flex;
 justify-content: center;
}

/* Either 3 cards on a row or a single centered card — never a 2 + 1 orphan.
   The three cards share the row and shrink together (capped at 342px, cards.css)
   down to the breakpoint, then collapse straight to one column. */
.service-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
.service-cards .service-card {
  flex: 1 1 0;      /* three equal columns that fill the row */
  min-width: 0;
}
/* At/below the tablet breakpoint three cards get too narrow → stack to one
   centered card per row (matches the site's other 1024px breakpoints).
   flex-direction:column forces a true single column — flex-basis:100% would be
   clamped by the card's 342px max-width and still fit two per row. */
@media (max-width: 1024px) {
  .service-cards { flex-direction: column; align-items: center; }
  .service-cards .service-card { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 767px) {

.fullservice__title{
    letter-spacing: 0px;
}

.fullservice__body{
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  margin-bottom: 40px;
}

.fullservice__scrollbar{
      padding: 12px 0px;
  }

.fullservice__header {
  text-align: center;
  max-width: 100%;
  margin-bottom: 0px;
  padding-inline: 8px;
}

.service-card{
  max-height:432px;
  width: 100%;
}
}

/* Mobile: cap oversized section padding to the 60px base rhythm. */
@media (max-width: 767px) {
  .section--services:has(.fullservice__scrollbar) { padding-bottom: 60px; }
}