/*
 * The row graphic's own styles (the radial slice graphic behind a row/card),
 * moved out of ServiceRowsGrid.module.css unchanged so ServiceRowsGrid and the
 * Topic Section share them. The graphic reads its colors and easing from
 * custom properties the consumer sets on an ancestor: --ease-soft,
 * --service-row-rest, --service-row-active, --row-ring, --row-ray, --row-slice,
 * --row-node and their -active twins (see ServiceRowsGrid.module.css .grid).
 */

.sOMWkBECHg4oxBv6wBZw {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.FW6Pqda50wuSElPEAUZ3 {
  position: absolute;
  width: 0;
  height: 0;
}

.faYC6yr0MiwjFTmRDfDf {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
}

._neGEyIB5CWTeasZzPsP {
  fill: var(--service-row-rest);
  transition: fill 500ms var(--ease-soft);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] ._neGEyIB5CWTeasZzPsP {
  fill: var(--service-row-active);
}

/*
 * Grid: dotted rings (toned down to the ray color at rest, like the rays
 * themselves — see --row-ray above), dashed rays. Shape outlines and nodes
 * stay hidden until hovered, then appear as the sweep passes them.
 */
.fpOStQ6tvY3Bao4L5vz5 {
  fill: none;
  stroke: var(--row-ray);
  stroke-dasharray: 2 2;
  transition:
    stroke 500ms var(--ease-soft),
    opacity 400ms ease;
}

.fpOStQ6tvY3Bao4L5vz5 circle[data-outer] {
  opacity: 0;
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .fpOStQ6tvY3Bao4L5vz5 {
  stroke: var(--row-ring-active);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .fpOStQ6tvY3Bao4L5vz5 circle[data-outer] {
  opacity: 1;
}

.UhZiDpo0QUz9FkLs5MhT {
  stroke: var(--row-ray);
  stroke-dasharray: 2 2;
  transition: stroke 500ms var(--ease-soft);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .UhZiDpo0QUz9FkLs5MhT {
  stroke: var(--row-ray-active);
}

.Nthg7tL22JAs0hwfa6O_ {
  fill: none;
  stroke-width: 1;
  stroke-opacity: 0.6;
  stroke-dasharray: 2 2;
  opacity: 0;
  transition:
    opacity 400ms ease,
    stroke 500ms var(--ease-soft),
    stroke-opacity 250ms ease;
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .Nthg7tL22JAs0hwfa6O_ {
  opacity: 1;
  stroke-opacity: 1;
  transition-delay: var(--sweep-at, 0ms);
}

.sATcUWK4IiKJCPOsr7i7 {
  stroke: var(--row-slice);
  stroke-width: 1;
  transition: stroke 500ms var(--ease-soft);
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .sATcUWK4IiKJCPOsr7i7 {
  stroke: var(--row-slice-active);
}

.UwWNyEK8MJw4efzcNBsd {
  fill: var(--row-node);
  opacity: 0;
  transition:
    opacity 400ms ease,
    fill 250ms ease;
}

.wG0jP5jrDastlBrjOUzB[data-state='active'] .UwWNyEK8MJw4efzcNBsd {
  opacity: 1;
  fill: var(--row-node-active);
  transition-delay: var(--sweep-at, 0ms);
}

/*
 * Clockwise sweep on hover/focus: the mask blade rotates around the row's
 * corner. In: starts at speed and eases off, so the color is visibly moving
 * at once. Out: starts at full speed the moment the mouse/focus leaves, then
 * settles, so nothing lingers.
 */
.zqGyrbgHK9ctO3ScmwMZ {
  transition: transform var(--sweep-ms, 1100ms) cubic-bezier(0.25, 0.8, 0.35, 1);
}

.CG80_JtsB9RxdINkKDod {
  transition: transform var(--sweep-ms, 1100ms) cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :is(.fpOStQ6tvY3Bao4L5vz5, .UhZiDpo0QUz9FkLs5MhT, .Nthg7tL22JAs0hwfa6O_, .sATcUWK4IiKJCPOsr7i7, .UwWNyEK8MJw4efzcNBsd, ._neGEyIB5CWTeasZzPsP, .zqGyrbgHK9ctO3ScmwMZ, .CG80_JtsB9RxdINkKDod) {
    transition: none;
  }
}

/*
 * One hover-sweep row (see ServiceRow.tsx), in two looks set by data-look:
 *
 * pillar — the Trust Pillars' row (the rules ServiceRowsGrid.module.css used
 *   to carry): 24px corners, Heading M title with an optional icon, a gradient
 *   in the row's colour behind the text at rest, and the list around it
 *   (components/ServiceRowsGrid) choosing the palette through the
 *   --service-row-* / --row-* variables (its light and dark tones).
 * service — "Explore our other services" (the prototype's ServiceGroups with
 *   separate): a white row, 32px corners, nothing drawn at rest; on hover the
 *   row fills soft black as colour sweeps in under a 20% black wash, its type
 *   turns white, the Heading L title swells a little and an arrow slides in
 *   after it. The shapes are kept clear of the text (RowGraphic's clearText),
 *   so there's no gradient.
 * index — the What we do page's services index (the prototype's ServiceIndex):
 *   the service look as a tall box, the title held to two lines at the top and
 *   the description in a frosted box at the foot. Lit (data-active) when it is
 *   the row being read, set from outside by scroll position rather than hover,
 *   and faded (data-dim) otherwise; hovering the lit row swells its title and
 *   slides its arrow in (hidden until then), a cue to click through. Under 992px (Webflow’s tablet
 *   breakpoint, where the nav is gone): every row lit, sized down, its arrow always showing.
 *
 * The variables are read with fallbacks rather than declared on .row, so a
 * wrapper's values (the grid's dark tone) reach the row by inheritance. The
 * graphic (shared/RowGraphic) reads the same --service-row-* / --row-*
 * variables, so a look declares the full set.
 */

/* A code component's Shadow DOM doesn't inherit the page's box-sizing reset or font smoothing. */
.SPkGhSMg6mxwMbr8AAyL,
.SPkGhSMg6mxwMbr8AAyL *,
.SPkGhSMg6mxwMbr8AAyL *::before,
.SPkGhSMg6mxwMbr8AAyL *::after {
  box-sizing: border-box;
}

.SPkGhSMg6mxwMbr8AAyL {
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --fade: 400ms ease;
  position: relative;
  isolation: isolate;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 24px;
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  list-style: none;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='service'],
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] {
  --service-row-rest: #ffffff;
  --service-row-active: var(--text-primary, #171717);
  --service-row-fg: var(--text-primary, #171717);
  --service-row-fg-active: var(--text-inverse, #ffffff);
  /* Nothing at rest: only the hover's sweep (the prototype's ServiceGroups). */
  --row-ring: transparent;
  --row-ray: transparent;
  --row-slice: rgb(255 255 255 / 0.9);
  --row-node: var(--text-primary, #171717);
  --row-ring-active: rgb(255 255 255 / 0.2);
  --row-ray-active: rgb(255 255 255 / 0.35);
  --row-slice-active: rgb(0 0 0 / 0.35);
  --row-node-active: var(--text-inverse, #ffffff);
  border-radius: 32px;
}

/*
 * pillar, at rest: a gradient in the row's background colour covers the lines
 * crossing behind the text (solid on the left, clear by the graphic on the
 * right) so the title/description read clearly. Fades out while the row is
 * hovered/focused (the background itself is dark/light enough by then).
 */
.SPkGhSMg6mxwMbr8AAyL[data-look='pillar']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--service-row-rest, #ffffff) 0%,
    var(--service-row-rest, #ffffff) 38%,
    color-mix(in srgb, var(--service-row-rest, #ffffff) 80%, transparent) 55%,
    transparent 82%
  );
  pointer-events: none;
  transition: opacity 350ms ease;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='pillar'][data-active='true']::after {
  opacity: 0;
  transition-duration: 200ms;
}

/* service and index, on hover: a 20% soft black over the graphic, under the content. */
.SPkGhSMg6mxwMbr8AAyL[data-look='service']::before,
.SPkGhSMg6mxwMbr8AAyL[data-look='index']::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgb(23 23 23 / 0.2);
  opacity: 0;
  transition: opacity var(--fade);
  pointer-events: none;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='service'][data-active='true']::before,
.SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true']::before {
  opacity: 1;
}

/* (The graphic itself is shared/RowGraphic, styled by RowGraphic.module.css; it reads the variables above.) */

/* --- Content: title (optional icon, bold phrase, arrow) and description --- */

.m9pzXbcDdwV4EgbIejki {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--service-row-fg, var(--text-primary, #171717));
  text-decoration: none;
  /* Leaving hover: the slower, symmetric wipe duration (prototype's --duration-wipe/--ease-in-out). */
  transition: color 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Entering hover/focus: text waits for the background fill to read as dark/light
   first, then flips quickly (prototype's --text-fade-delay/--text-fade-duration). */
.SPkGhSMg6mxwMbr8AAyL[data-active='true'] .m9pzXbcDdwV4EgbIejki {
  color: var(--service-row-fg-active, var(--text-inverse, #ffffff));
  transition: color 180ms ease 60ms;
}

/* service and index: the type turns white a beat after the fill starts (ServiceGroups' .groupText). */
.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .m9pzXbcDdwV4EgbIejki,
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .m9pzXbcDdwV4EgbIejki {
  transition: color var(--fade);
}

.SPkGhSMg6mxwMbr8AAyL[data-look='service'][data-active='true'] .m9pzXbcDdwV4EgbIejki,
.SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .m9pzXbcDdwV4EgbIejki {
  transition: color var(--fade) 120ms;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='pillar'] .m9pzXbcDdwV4EgbIejki:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .m9pzXbcDdwV4EgbIejki:focus-visible,
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .m9pzXbcDdwV4EgbIejki:focus-visible {
  outline: none;
}

/* Keyboard focus: a 2px brand-blue ring outside the row's box, 2px out. */
.SPkGhSMg6mxwMbr8AAyL:has(.m9pzXbcDdwV4EgbIejki:focus-visible) {
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 2px;
}

.j5n8jxlcUMWf84zvNBYA {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: max(30px, 2.1vw) 32px max(30px, 2.1vw) 52px;
}

/* (40px above and below at 1728, 56px at the sides; the text's box as wide as the row so the title runs on one line, the description kept to its own measure below: ServiceDetail .otherGroups.) */
.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .j5n8jxlcUMWf84zvNBYA {
  gap: max(10px, 0.93vw);
  max-width: none;
  padding: max(24px, 2.31vw) max(32px, 3.24vw);
}

/* pillar: Heading M, Regular, on one line with its icon and arrow. */
.y_uxdvgtq3wFq8UADkaq {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  transform-origin: left bottom;
  font-size: var(--type-heading-m-size, 42px);
  font-weight: 400;
  line-height: var(--type-heading-m-lh, 50px);
  letter-spacing: var(--type-heading-m-ls, 0);
  white-space: nowrap;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.SPkGhSMg6mxwMbr8AAyL[data-active='true'] .y_uxdvgtq3wFq8UADkaq,
.m9pzXbcDdwV4EgbIejki:focus-visible .y_uxdvgtq3wFq8UADkaq {
  transform: scale(1.09);
}

/* service and index: Medium, wrapping; swells from its left middle. index: Heading L (the What we do list, ServiceGroups). */
.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .y_uxdvgtq3wFq8UADkaq,
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .y_uxdvgtq3wFq8UADkaq {
  display: block;
  transform-origin: 0 50%;
  font-size: var(--type-heading-l-size, 54px);
  font-weight: 500;
  line-height: var(--type-heading-l-lh, 59px);
  letter-spacing: var(--type-heading-l-ls, -1px);
  white-space: normal;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* service: a size under, Heading M (the service page's other services, ServiceDetail .otherGroups h3). */
.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .y_uxdvgtq3wFq8UADkaq {
  font-size: var(--type-heading-m-size, 42px);
  line-height: var(--type-heading-m-lh, 50px);
  letter-spacing: var(--type-heading-m-ls, 0);
}

.SPkGhSMg6mxwMbr8AAyL[data-look='service'][data-active='true'] .y_uxdvgtq3wFq8UADkaq,
.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .m9pzXbcDdwV4EgbIejki:focus-visible .y_uxdvgtq3wFq8UADkaq {
  transform: scale(1.06);
}

/* A title with key words: Regular, those SemiBold (as What we do's cards). */
.y_uxdvgtq3wFq8UADkaq[data-strong] {
  font-weight: 400;
}

.y_uxdvgtq3wFq8UADkaq strong {
  font-weight: 600;
}

.qrD8MEIpYGopu3KFUo9S {
  display: inline-block;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* The arrow after the title: in on hover, sliding in from the left. */
.GPNXSUPwxb5r8z_45aRC {
  flex-shrink: 0;
  width: 0.56em;
  height: auto;
  margin-left: 0.3em;
  opacity: 0;
  translate: -0.3em 0;
  transition:
    opacity 400ms ease,
    translate 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* (Inline in the wrapping title: its middle level with the lowercase letters' middle.) */
.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .GPNXSUPwxb5r8z_45aRC,
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .GPNXSUPwxb5r8z_45aRC {
  vertical-align: 0.05em;
}

.SPkGhSMg6mxwMbr8AAyL[data-active='true'] .GPNXSUPwxb5r8z_45aRC,
.m9pzXbcDdwV4EgbIejki:focus-visible .GPNXSUPwxb5r8z_45aRC {
  opacity: 1;
  translate: none;
}

/* pillar: Body/Lead unless a wrapper sets --row-text-* (How we work's Trust Pillars set Body/Large, as the prototype's TrustPillars.module.css does). */
.m0fPIVXdwSGWk_jduXkk {
  max-width: 760px;
  margin: 0;
  padding-top: max(16px, 1.2vw);
  font-size: var(--row-text-size, var(--type-lead-size, 20px));
  line-height: var(--row-text-lh, var(--type-lead-lh, 28px));
  font-weight: var(--row-text-weight, var(--type-lead-weight, 400));
  letter-spacing: var(--row-text-ls, var(--type-lead-ls, 0));
}

/* service: Body/Large, softened, no wider than 50rem (.otherGroups h3 + p); lightens a beat after the fill starts. */
.SPkGhSMg6mxwMbr8AAyL[data-look='service'] .m0fPIVXdwSGWk_jduXkk {
  max-width: 50rem;
  padding-top: 0;
  color: var(--neutral-700, #353535);
  font-size: var(--type-large-size, 18px);
  line-height: var(--type-large-lh, 26px);
  font-weight: var(--type-large-weight, 400);
  letter-spacing: var(--type-large-ls, 0);
  text-wrap: pretty;
  transition: color var(--fade);
}

.SPkGhSMg6mxwMbr8AAyL[data-look='service'][data-active='true'] .m0fPIVXdwSGWk_jduXkk {
  color: rgb(255 255 255 / 0.75);
  transition-delay: 120ms;
}

.atCl7g7p6M7hvIk3F2zP {
  display: none;
}

/* !important so the reset outranks the look- and state-specific rules above, which set their own transitions and delays. */
@media (prefers-reduced-motion: reduce) {
  .SPkGhSMg6mxwMbr8AAyL::before,
  .SPkGhSMg6mxwMbr8AAyL::after,
  .m9pzXbcDdwV4EgbIejki,
  .y_uxdvgtq3wFq8UADkaq,
  .GPNXSUPwxb5r8z_45aRC,
  .m0fPIVXdwSGWk_jduXkk {
    transition: none !important;
  }
}

/*
 * Phones (plain: no graphic or hover — the row skips rendering the SVG below
 * this width): a flat box in the row's rest colour, less room. pillar: an
 * arrow at the right instead of the inline hover arrow; service: the inline
 * arrow always shows.
 */
@media (max-width: 767px) {
  .SPkGhSMg6mxwMbr8AAyL {
    background: var(--service-row-rest, #ffffff);
  }

  .SPkGhSMg6mxwMbr8AAyL::before,
  .SPkGhSMg6mxwMbr8AAyL::after {
    display: none;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-active='true'] .m9pzXbcDdwV4EgbIejki,
  .m9pzXbcDdwV4EgbIejki {
    color: var(--service-row-fg, var(--text-primary, #171717));
  }

  .y_uxdvgtq3wFq8UADkaq {
    white-space: normal;
    transform: none !important;
  }

  .j5n8jxlcUMWf84zvNBYA {
    position: relative;
    padding: 20px 56px 22px 24px;
  }

  .m0fPIVXdwSGWk_jduXkk {
    padding-top: 8px;
    font-size: var(--type-default-size, 16px);
    line-height: var(--type-default-lh, 23px);
    font-weight: var(--type-default-weight, 400);
    letter-spacing: var(--type-default-ls, 0);
  }

  .GPNXSUPwxb5r8z_45aRC {
    display: none;
  }

  .atCl7g7p6M7hvIk3F2zP {
    display: block;
    position: absolute;
    top: calc(20px + var(--type-heading-m-lh, 50px) / 2 - 6px);
    right: 24px;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='service'] {
    border-radius: 24px;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='service'] .j5n8jxlcUMWf84zvNBYA {
    padding: 18px 20px;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='service'] .m0fPIVXdwSGWk_jduXkk {
    padding-top: 0;
    font-size: var(--type-large-size, 18px);
    line-height: var(--type-large-lh, 26px);
    font-weight: var(--type-large-weight, 400);
    letter-spacing: var(--type-large-ls, 0);
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='service'] .GPNXSUPwxb5r8z_45aRC {
    display: inline;
    opacity: 1;
    translate: none;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='service'] .atCl7g7p6M7hvIk3F2zP,
  .SPkGhSMg6mxwMbr8AAyL[data-look='index'] .atCl7g7p6M7hvIk3F2zP {
    display: none;
  }
}

/* --- index: the What we do page's services index (see the header) --- */

/* Faded while another row is the one being read: 0.5, not the prototype's 0.35, so a faded title (Heading L, large text) keeps 3:1 on the page's grey (0.35 gave about 2.3:1). */
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] {
  transition: opacity 450ms ease;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-dim='true'] {
  opacity: 0.5;
}

/* A tall box: the title at the top, the description's box at the foot, 12px in from the sides and foot. */
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .j5n8jxlcUMWf84zvNBYA {
  --pad: max(32px, 3.24vw);
  --inset: 12px;
  justify-content: space-between;
  gap: max(28px, 2.31vw);
  min-height: max(380px, 52vh);
  max-width: none;
  padding: max(36px, 3vw) var(--pad) var(--inset);
}

/* The title: no wider than two lines of these titles. Lit is its resting state here, so no swell; hovering the lit row swells it. */
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .y_uxdvgtq3wFq8UADkaq {
  max-width: 13em;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .y_uxdvgtq3wFq8UADkaq {
  transform: none;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .m9pzXbcDdwV4EgbIejki:hover .y_uxdvgtq3wFq8UADkaq {
  transform: scale(1.06);
}

/* The arrow: out of sight while the row is lit (lit is set by scroll, not by the pointer); it slides in only on hover or keyboard focus, a cue to click through. */
.SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .GPNXSUPwxb5r8z_45aRC {
  opacity: 0;
  translate: -0.3em 0;
}

.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .m9pzXbcDdwV4EgbIejki:hover .GPNXSUPwxb5r8z_45aRC,
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .m9pzXbcDdwV4EgbIejki:focus-visible .GPNXSUPwxb5r8z_45aRC {
  opacity: 1;
  translate: none;
}

/* What the service is: in a dark frosted box, light type, Body/Lead; out of sight (faded, a step down) until the row is the one being read. */
.SPkGhSMg6mxwMbr8AAyL[data-look='index'] .m0fPIVXdwSGWk_jduXkk {
  max-width: none; /* (the row's 760px limit would stop the box short of the right edge) */
  margin: 0 calc(var(--inset) - var(--pad));
  padding: max(24px, 2vw) max(28px, 2.3vw);
  border-radius: 22px;
  background: rgb(60 60 60 / 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgb(255 255 255 / 0.85);
  font-size: var(--type-lead-size, 20px);
  line-height: var(--type-lead-lh, 28px);
  font-weight: var(--type-lead-weight, 400);
  letter-spacing: var(--type-lead-ls, 0);
  text-wrap: pretty;
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 450ms ease,
    translate 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .m0fPIVXdwSGWk_jduXkk {
  color: rgb(255 255 255 / 0.85);
  opacity: 1;
  translate: 0 0;
  transition-delay: 150ms;
}

/*
 * Under 992px (Webflow’s tablet breakpoint): the nav is gone, so every row is lit (the desktop look, sized down),
 * none faded, and the arrow shows without hover as the link cue. Soft black behind the graphic until it has
 * measured, so the white type never sits on white. Outranks the phones block above, which flattens the other looks.
 */
@media (max-width: 991px) {
  .SPkGhSMg6mxwMbr8AAyL[data-look='index'] {
    border-radius: 24px;
    opacity: 1;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] {
    background: var(--service-row-active, #171717);
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='index']::before {
    display: block;
  }

  /* The title runs across the graphic here (no room beside it), so a soft-black fade mutes the graphic behind it. */
  .SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true']::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    display: block;
    height: 55%;
    border-radius: inherit;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: linear-gradient(rgb(23 23 23 / 0.85), rgb(23 23 23 / 0.6) 45%, transparent);
    pointer-events: none;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .m9pzXbcDdwV4EgbIejki {
    color: var(--service-row-fg-active, #ffffff);
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='index'] .j5n8jxlcUMWf84zvNBYA {
    --pad: 24px;
    --inset: 10px;
    gap: 24px;
    min-height: 360px;
    padding-top: 28px;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='index'] .y_uxdvgtq3wFq8UADkaq {
    max-width: none;
    transform: none !important;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='index'] .GPNXSUPwxb5r8z_45aRC,
  .SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .GPNXSUPwxb5r8z_45aRC {
    display: inline;
    opacity: 1;
    translate: none;
  }

  .SPkGhSMg6mxwMbr8AAyL[data-look='index'] .m0fPIVXdwSGWk_jduXkk,
  .SPkGhSMg6mxwMbr8AAyL[data-look='index'][data-active='true'] .m0fPIVXdwSGWk_jduXkk {
    padding: 16px 18px;
    border-radius: 16px;
    font-size: var(--type-large-size, 18px);
    line-height: var(--type-large-lh, 26px);
    font-weight: var(--type-large-weight, 400);
    letter-spacing: var(--type-large-ls, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .SPkGhSMg6mxwMbr8AAyL[data-look='index'] {
    transition: none !important;
  }
}