/*
 * Services page — Figma node 1:658.
 * Content column is 1361 wide inside 40px gutters, starting 178px below the top.
 */

.fs-shell {
  max-width: 1441px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ---------- hero — node 1:659 ---------- */

.fs-hero { padding-top: 96px; }        /* 178 - (27 + 55) nav block */

.fs-hero__head {                       /* node 1:660 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.fs-hero__title {                      /* node 1:661 — Inter 47.636/55.762, width 668 */
  width: 668px;
  flex-shrink: 0;
  margin: 4px 0 0;                     /* node sits 4px lower than the lede */
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 47.636px;
  line-height: 55.762px;
  letter-spacing: -2.3818px;
}

.fs-hero__lede {                       /* node 1:662 — Arial 19/24, width 553 */
  width: 553px;
  flex-shrink: 0;
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.19px;
}

.fs-pillars {                          /* node 1:663 — four 322x417 cards, gap 24 */
  display: flex;
  gap: 24px;
  margin: 128px 0 0;                   /* 248 - 120 */
  padding: 0;
  list-style: none;
}

.fs-pillar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 322 / 417;
  background: #d9d9d9;
  overflow: hidden;
}

/* The whole pillar is the link into its capability list; it is positioned so
   the image and the label keep resolving their inset against the same box. */
.fs-pillar__link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.fs-pillar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

/* Hovering one pillar desaturates and fades the others. The class is set from
   JS on the pillar itself, so the gaps between cards don't trigger it. */
.fs-pillars.is-hovering .fs-pillar img { filter: grayscale(1); opacity: 0.55; }
.fs-pillars.is-hovering .fs-pillar:hover img,
.fs-pillars.is-hovering .fs-pillar:focus-within img { filter: none; opacity: 1; }

/* The label is white over whatever the photo happens to be; a top scrim keeps
   it readable on the light crops, which the mobile aspect ratios expose most. */
.fs-pillar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.fs-pillar__label {                    /* node 1:666 — Arial 28, white, centred, 32 from top */
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  font-size: 28px;
  line-height: 27.374px;
  letter-spacing: -1.4px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}

/* ---------- we create the most impact for — node 1:677 ---------- */

.fs-impact { margin-top: var(--fh-band); }      /* 921 - 665 */

/* Node 1:679 is a section title, not a display one: Arial 28 uppercase, two
   lines inside a 55px box — the same role as "Challenges we help overcome".
   It had been built at the display size in Inter, which is why it read as the
   wrong typeface beside the row names (those really are Inter 47.636). */
.fs-impact__title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 27.374px;
  letter-spacing: -1.4px;
  text-transform: uppercase;
}

.fs-impact__list {                     /* node 1:680 */
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 128px 0 0;                   /* 183 - 55 */
  padding: 0;
  list-style: none;
}

.fs-impact__row {                      /* node 1:681 — title left, copy right, rule below */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 33px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.fs-impact__name {                     /* node 1:684 — Inter 47.636/55.762, width 668 */
  width: 668px;
  flex-shrink: 0;
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 47.636px;
  line-height: 55.762px;
  letter-spacing: -2.3818px;
}

.fs-impact__body {                     /* node 1:685 — Arial 19/24, width 436 */
  width: 436px;
  flex-shrink: 0;
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.19px;
}

/* ---------- challenges carousel — node 1:705 ---------- */

.fs-chal { margin-top: var(--fh-band); }        /* 1972 - 1716 */

.fs-chal__head {                       /* node 1:706 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.fs-chal__title {                      /* node 1:707 — Arial 28, width 438 */
  width: 438px;
  margin: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 27.374px;
  letter-spacing: -1.4px;
  text-transform: uppercase;
}

.fs-chal__nav {                        /* node 1:708 — two 55x55 buttons */
  display: flex;
  flex-shrink: 0;
}

.fs-chal__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.fs-chal__arrow:hover { opacity: 0.5; }

.fs-chal__arrow[disabled] {
  opacity: 0.2;
  cursor: default;
}

/*
 * The track scrolls natively rather than being transformed, so the carousel
 * answers to a swipe or a trackpad as well as to the arrows. The arrows drive
 * the same scroll position (figma-services.js).
 */
.fs-chal__viewport {
  margin-top: 128px;                   /* 183 - 55 */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fs-chal__viewport::-webkit-scrollbar { display: none; }

/* click-and-drag (mouse/pen only — touch keeps native momentum) */
.fs-chal__viewport { cursor: grab; }

.fs-chal__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;              /* snap fights a scrollLeft set per frame;
                                          stays off until the release glide ends */
  user-select: none;
}

.fs-chal__viewport img { -webkit-user-drag: none; user-drag: none; }

.fs-chal__track {                      /* node 1:713 — gap 24 */
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-chal__card {                       /* node 1:714 — 437 wide, 385 tall, rule on the right */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: calc((100% - 48px) / 3);
  height: 385px;
  box-sizing: border-box;
  padding: 32px 32px 32px 8px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  scroll-snap-align: start;
}

.fs-chal__card:last-child { border-right: 0; }

.fs-chal__card-title {                 /* Arial 28 */
  margin: 0;
  font-size: 28px;
  line-height: 27.374px;
  letter-spacing: -1.4px;
  text-transform: uppercase;
}

.fs-chal__card-body {                  /* Arial 19/24 */
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.19px;
}

/* ---------- our capabilities — node 1:723 ---------- */

.fs-caps { margin-top: var(--fh-band); }        /* 2796 - 2540 */

.fs-caps__inner {
  display: flex;
  align-items: flex-start;
  gap: 141px;                          /* 577 - 436 */
}

.fs-caps__aside {                      /* node 1:724 — width 436 */
  width: 436px;
  flex-shrink: 0;
  align-self: stretch;                 /* full-height column, otherwise the
                                          sticky child has no room to travel */
}

.fs-caps__sticky {
  position: sticky;
  top: 120px;
}

.fs-caps__title {                      /* node 1:727 — Arial 28 */
  margin: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 27.374px;
  letter-spacing: -1.4px;
  text-transform: uppercase;
}

.fs-caps__lede {                       /* node 1:728 — Arial 19/24 */
  margin: 32.626px 0 0;                /* 60 - 27.374 */
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.19px;
}

.fs-caps__groups {                     /* node 1:733 — width 783, groups 96 apart */
  display: flex;
  flex-direction: column;
  gap: 96px;
  width: 783px;
  flex-shrink: 1;
  min-width: 0;
}

.fs-caps__group {                      /* node 1:734 — label then list, gap 48 */
  display: flex;
  flex-direction: column;
  gap: 48px;
  /* Landing from a pillar or from the home page's discipline strip: clear the
     fixed header rather than tucking the group label under it. */
  scroll-margin-top: 120px;
}

.fs-caps__group-label {                /* node 1:735 — Arial 19.252/22.536, 40% */
  margin: 0;
  font-size: 19.252px;
  line-height: 22.536px;
  letter-spacing: -0.1925px;
  text-transform: uppercase;
  opacity: 0.4;
}

.fs-caps__list {                       /* node 1:736 — rows 24 apart with 1px rules */
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-caps__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.fs-caps__list .fs-caps__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.fs-caps__item-name {                  /* Arial 24/33.283 */
  font-size: 24px;
  line-height: 33.283px;
  letter-spacing: -0.24px;
}

.fs-caps__item-link {                  /* Arial 19/24, underlined */
  flex-shrink: 0;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.19px;
  color: #000;
  white-space: nowrap;
}

/* ---------- closing CTA — node 1:817 ----------
   The block itself is the home page's (figma-home.css). This page ends on it
   rather than on the FAQ, so it needs the closing space the FAQ carries there;
   scoped to .fs so the home page keeps its own rhythm. */

.fs .fh-cta { padding-bottom: 160px; }

/* ---------- responsive ---------- */

@media (max-width: 1439px) {
  .fs-hero__title,
  .fs-impact__name { width: 50%; }
  .fs-hero__lede { width: 41%; }
  .fs-impact__body { width: 33%; }
  .fs-caps__inner { gap: 8%; }
  .fs-caps__aside { width: 32%; }
  .fs-caps__groups { width: 60%; }
}

@media (max-width: 1100px) {
  .fs-shell { padding: 0 24px; }
  /* "COMMUNICATION" at 28px is wider than a quarter-width tile here. */
  .fs-pillar__label { font-size: clamp(18px, 2.4vw, 28px); }
  .fs-pillars { margin-top: 80px; gap: 16px; }
  .fs-impact { margin-top: 160px; }
  .fs-impact__list { margin-top: 80px; }
  .fs-chal { margin-top: 160px; }
  .fs-chal__viewport { margin-top: 80px; }
  .fs-chal__card { width: calc((100% - 24px) / 2); }
  .fs-caps { margin-top: 160px; }
  .fs-caps__item-name { font-size: 20px; line-height: 28px; }
}

@media (max-width: 820px) {
  .fs-shell { padding: 0 20px; }
  .fs-hero { padding-top: 56px; }
  .fs-hero__head { flex-direction: column; gap: 32px; }
  .fs-hero__title,
  .fs-hero__lede,
  .fs-impact__name,
  .fs-impact__body { width: 100%; }
  .fs-hero__title { margin-top: 0; }
  /* The display headings stay display-sized: at 18px they were smaller than
     the body copy under them. */
  .fs-hero__title,
  .fs-impact__name { font-size: 32px; line-height: 38px; letter-spacing: -1.4px; }
  /* Section titles at 22px caps, as on home: at 16-18 they read as chips. */
  .fs-impact__title,
  .fs-chal__title,
  .fs-caps__title { font-size: 22px; letter-spacing: -1.1px; }
  /* A wrapped caps title at the desktop's 27px pitch read as two titles. */
  .fs-impact__title,
  .fs-chal__title,
  .fs-caps__title { line-height: 1.15; }

  /*
   * Four portrait cards stacked one per row would run past 900px of scroll on
   * a phone, so they pair up in a 2x2 grid and keep the Figma portrait crop.
   * Grid also sidesteps the flex-basis:0 collapse the column layout caused —
   * in a column flex container `flex: 1 1 0` zeroes the height and the
   * aspect-ratio never applies, so every pillar rendered 0px tall.
   */
  .fs-pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
    gap: 16px;
  }

  .fs-pillar { aspect-ratio: 322 / 417; }
  .fs-pillar__label { top: 20px; font-size: 18px; letter-spacing: -0.9px; }

  /* stacked, the heading and the first row name are the same size, so a rule
     above the list does the separating the two-column layout got for free */
  .fs-impact { margin-top: 120px; }
  .fs-impact__list {
    margin-top: 40px;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }
  .fs-impact__row { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 24px; }
  .fs-impact__row:last-child { padding-bottom: 0; border-bottom: 0; }

  .fs-chal { margin-top: 120px; }
  .fs-chal__head { flex-direction: row; align-items: center; gap: 16px; }
  .fs-chal__title { width: auto; flex: 1 1 auto; }
  .fs-chal__viewport { margin-top: 48px; margin-right: -20px; padding-right: 20px; }
  .fs-chal__track { gap: 16px; }
  /* The viewport's right padding does not scroll with the track, so the last
     card ended flush on the screen edge; this keeps the gutter after it. */
  .fs-chal__track::after { content: ""; flex: 0 0 4px; }

  /*
   * One card at a time with the next one peeking, so the swipe is discoverable.
   * The desktop's column rule stays, between a card and the one peeking in:
   * a rule under each card alone read as a bottom border on a box with no sides.
   */
  .fs-chal__card {
    justify-content: flex-start;
    gap: 20px;
    width: calc((100% - 16px) / 2 - 14px);   /* two up, with the third peeking */
    height: auto;
    min-height: 0;
    padding: 0 20px 0 0;
  }

  .fs-caps { margin-top: 120px; }
  .fs-caps__inner { flex-direction: column; gap: 56px; }
  .fs-caps__aside { width: 100%; align-self: auto; }
  .fs-caps__sticky { position: static; }
  .fs-caps__groups { width: 100%; gap: 64px; }

  .fs-caps__lede { margin-top: 20px; }
  .fs-caps__group { gap: 32px; }
  .fs-caps__item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fs-caps__item-name { font-size: 19px; line-height: 26px; }
  .fs-caps__item-link { white-space: normal; }
  /* The header is hidden while the page travels down to a group. */
  .fs-caps__group { scroll-margin-top: 24px; }

  /* Folded (figma-services.js): each discipline is a row with a plus that
     opens its list; the first one starts open. One caps style for the section
     title and the group labels, full ink, since the label is now the control. */
  .fs-caps--folded .fs-caps__groups { gap: 0; }
  .fs-caps--folded .fs-caps__group { gap: 0; border-top: 1px solid rgba(0, 0, 0, 0.2); }
  .fs-caps--folded .fs-caps__group:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  .fs-caps--folded .fs-caps__group-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    /* The small caps style, a step under the section title. */
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: -0.8px;
    opacity: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fs-caps--folded .fs-caps__group-label::after {
    content: "+";
    font-size: 28px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .fs-caps--folded .fs-caps__group.is-open .fs-caps__group-label::after { transform: rotate(45deg); }
  .fs-caps--folded .fs-caps__group:not(.is-open) .fs-caps__list:not(.is-folding) { display: none; }
  .fs-caps--folded .fs-caps__list { padding-bottom: 24px; }
  .fs-caps--folded .fs-caps__item:last-child { border-bottom: 0; padding-bottom: 0; }
  /* The groups and their rows were ruled in the same grey hairline at the same
     spacing, so a discipline's label read as one more row in the list. A group
     is bounded in full ink, its rows in a fainter rule, and the open list ends
     with more air than its rows have between them. */
  .fs-caps--folded .fs-caps__group,
  .fs-caps--folded .fs-caps__group:last-child { border-color: #000; }
  .fs-caps--folded .fs-caps__item { border-bottom-color: rgba(0, 0, 0, 0.1); }
  .fs-caps--folded .fs-caps__list { padding-bottom: 40px; }

  /* shared CTA block — the 436px copy column would otherwise widen the page */
  /* The band's own padding is the gap above it, as on home. */
  .fs .fh-cta { margin-top: 0; padding-bottom: 120px; }
  .fs-impact__title,
  .fs-chal__title,
  .fs-caps__title { text-wrap: balance; }
  /* Sentence case at the impact names' size: a second caps style beside the
     section title read as a near-duplicate. */
  .fs-chal__card-title { font-family: Inter, Arial, Helvetica, sans-serif; font-size: 25px; line-height: 30px; letter-spacing: -1px; text-transform: none; }
}

@media (max-width: 560px) {
  /* Still two by two: stacked one a row the four pictures were a thousand
     pixels before the first word of content. */
  .fs-pillars { gap: 12px; }
  .fs-pillar__label { top: 16px; font-size: 16px; letter-spacing: -0.8px; }

  /* one card at a time, the next peeking in to advertise the swipe */
  .fs-chal__card { width: 82%; }
}

@media (max-width: 359.98px) {
  .fs-pillar__label { font-size: 14px; letter-spacing: -0.6px; }
}

@media (max-width: 480px) {
  .fs-hero { padding-top: 40px; }
  .fs-hero__head { gap: 24px; }
  .fs-hero__title,
  .fs-impact__name { font-size: 25px; line-height: 30px; letter-spacing: -1px; }

  .fs-hero__lede { font-size: 17px; line-height: 23px; }
  .fs-pillars { margin-top: 40px; }

  .fs-impact { margin-top: 88px; }
  .fs-impact__list { margin-top: 36px; gap: 20px; }
  .fs-impact__body { font-size: 17px; line-height: 23px; }

  .fs-chal { margin-top: 88px; }

  .fs-chal__viewport { margin-top: 36px; }
  .fs-chal__card { width: 86%; gap: 16px; }
  .fs-chal__card-body { font-size: 17px; line-height: 23px; }

  .fs-caps { margin-top: 88px; }
  .fs-caps__inner { gap: 40px; }

  .fs-caps__lede { font-size: 17px; line-height: 23px; }
  .fs-caps__groups { gap: 48px; }
  .fs-caps__group { gap: 24px; }
  .fs-caps__list { gap: 20px; }
  .fs-caps__item { padding-bottom: 20px; }
  .fs-caps__item-name { font-size: 18px; line-height: 25px; }
  .fs-caps__item-link { font-size: 17px; }

  .fs .fh-cta { padding-bottom: 88px; }
}


/* Jumping from a pillar to its group glides rather than cutting, so it stays
   obvious that the two live on the same page. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}