/*
 * How we work: beyond capabilities — Figma node 1:1125.
 * Content column 1361 wide inside 39/40px gutters.
 */

.fw-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 39px;
  box-sizing: border-box;
}

.fw-wrap { padding: 73px 0 160px; }    /* frame 1:1126 sits 73px down */

.fw-title {                            /* node 1:1129 — Inter 36/40, centred */
  width: 474px;
  max-width: 100%;
  margin: 0 auto;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -1.08px;
  text-transform: uppercase;
  text-align: center;
}

.fw-list {                             /* node 1:1130 — rows at y=208 */
  margin: 128px 0 0;                   /* 208 - 80 */
  padding: 0;
  list-style: none;
}

.fw-row { padding-bottom: 32px; }      /* row ends 32px above its rule */

.fw-row + .fw-row { margin-top: 33px; }

.fw-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);   /* nodes 1:1138 / 1:1146 / 1:1154 */
}

.fw-row:last-child { padding-bottom: 0; }

.fw-row__inner {                       /* node 1:1131 — 32px inner padding */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 0 32px;
  min-height: 189px;
  color: #000;
  text-decoration: none;
}

.fw-row__text {                        /* node 1:1132 — label top, group bottom */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* The design draws this column 474px wide, but that is the width of its
     sample text, not a measure: "Digital research platform" at 47px is wider
     than that and wrapped, and every question ran to two lines with room to
     spare beside it. The column takes what the image leaves. */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 189px;
}

.fw-row__kind {                        /* node 1:1133 — Inter 16/18, 30% */
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  opacity: 0.3;
}

.fw-row__group {                       /* node 1:1134 — gap 12 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fw-row__title {                       /* Inter 47.636/55.762 */
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 47.636px;
  line-height: 55.762px;
  letter-spacing: -2.3818px;
}

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

.fw-row__media {                       /* node 1:1137 — 313x189 */
  position: relative;
  width: 313px;
  height: 189px;
  flex-shrink: 0;
  background: #d9d9d9;
  overflow: hidden;
}

.fw-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fw-row__inner:hover .fw-row__media img { transform: scale(1.05); }

/* The closing invitation follows the rows, whose own bottom padding is
   already the gap; the band's top padding would double it. */
.fw .fh-cta { padding-top: 0; }

/* A row that has a clip plays it over its still while hovered — the same
   treatment the case cards give theirs. figma-hover-media.js runs it. */
.fw-row__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

.fw-row__inner:hover .fw-row__video,
.fw-row__inner:focus-visible .fw-row__video { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fw-row__video { transition: none; }
}

@media (max-width: 1100px) {
  .fw-shell { padding: 0 24px; }
  .fw-row__title { font-size: 34px; line-height: 40px; letter-spacing: -1.6px; }
  .fw-row__media { width: 260px; height: 157px; }
}

@media (max-width: 820px) {
  .fw-shell { padding: 0 20px; }
  .fw-wrap { padding: 48px 0 96px; }
  /* Left, like every other page's heading and the rows under it: a centred
     title over a left-aligned list was the one thing on the page off its edge. */
  .fw-title { width: auto; margin: 0; text-align: left; text-transform: none; font-size: 28px; line-height: 34px; letter-spacing: -1.2px; }
  .fw-list { margin-top: 56px; }

  /* Stacked, each row is a card like an insight's: the picture first, then
     label, title and question. A picture on top is what says "tap me" on a
     phone, where the desktop's hover cue never arrives. */
  .fw-row__inner { flex-direction: column; gap: 20px; padding: 0; min-height: 0; }
  .fw-row__media { order: -1; }
  /* 30% black is a hairline's grey, too faint to read as a word on a phone. */
  .fw-row__kind { opacity: 0.6; font-family: Arial, Helvetica, sans-serif; letter-spacing: -0.8px; }
  .fw-row__text { width: 100%; min-height: 0; gap: 12px; }
  .fw-row__title { font-size: 28px; line-height: 34px; letter-spacing: -1.2px; }
  .fw-row__media { width: 100%; height: auto; aspect-ratio: 313 / 189; }

  /* the image no longer needs a hover cue it cannot receive */
  .fw-row__inner:hover .fw-row__media img { transform: none; }

  .fw-row { padding-bottom: 28px; }
  .fw-row + .fw-row { margin-top: 28px; }
}

@media (max-width: 480px) {
  .fw-wrap { padding: 32px 0 72px; }
  /* The page title in the rows' title style, as the insights page's is: a
     third caps style beside the labels read as a near-duplicate. */
  .fw-title { font-size: 25px; line-height: 30px; letter-spacing: -1px; }
  .fw-list { margin-top: 40px; }
  .fw-row__inner { gap: 16px; }
  .fw-row__text { gap: 10px; }
  .fw-row__group { gap: 8px; }
  .fw-row__title { font-size: 25px; line-height: 30px; letter-spacing: -1px; }
  .fw-row__sub { font-size: 17px; line-height: 23px; }
  .fw-row { padding-bottom: 24px; }
  .fw-row + .fw-row { margin-top: 24px; }
}