/* services_list module */

/* Module variables — edit here to change this module only */
.services_list {
  --services_list-bg: #fff;
  --services_list-heading: #141423; /* titles, links, hover text */
  --services_list-text: #494a52; /* numbers, descriptions, sub-services */
  --services_list-rule: #e6e6e6;
  --services_list-focus: #141423; /* intro focus outline */
  --services_list-accent: #c01e47; /* case study focus outline */
  --services_list-font-sans: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --services_list-font-serif: "Spezia Serif A", Georgia, "Times New Roman", serif;
  --services_list-max-w: 1920px;
  --services_list-gut: 120px;
  --services_list-pad-x: max(var(--services_list-gut), calc((100% - var(--services_list-max-w)) / 2 + var(--services_list-gut)));
  --services_list-pad-y: 73px;
  --services_list-gap: 48px;
  --services_list-columns: minmax(0, 420fr) minmax(0, 320fr) minmax(0, 348fr);
}

/* Narrow desktop */
@media (max-width: 1320px) {
  .services_list {
    --services_list-columns: 280px minmax(0, 1fr) 240px;
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .services_list {
    --services_list-gut: 48px;
    --services_list-pad-y: 56px;
    --services_list-gap: 32px;
    --services_list-columns: minmax(0, 1fr) 300px;
  }
}

/* Phone */
@media (max-width: 640px) {
  .services_list {
    --services_list-gut: 22px;
    --services_list-pad-y: 38px;
    --services_list-gap: 20px;
    --services_list-columns: minmax(0, 1fr);
  }
}

/* Light theme (reference: clients_quilt_light) */
.services_list--light {
  --services_list-bg: #fff;
  --services_list-heading: #141423;
  --services_list-text: #494a52;
  --services_list-rule: #e6e6e6;
  --services_list-focus: #141423;
  --services_list-accent: #c01e47;
}

/* Dark theme (reference: caps_platform) */
.services_list--dark {
  --services_list-bg: #0e0e1a;
  --services_list-heading: #fff;
  --services_list-text: rgba(255, 255, 255, 0.74);
  --services_list-rule: rgba(255, 255, 255, 0.16);
  --services_list-focus: #fff;
  --services_list-accent: #ff4d77;
}

/* ---------- Section ---------- */
.services_list {
  padding: var(--services_list-pad-y) var(--services_list-pad-x);
  background: var(--services_list-bg);
  color: var(--services_list-heading);
  font-family: var(--services_list-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.services_list,
.services_list *,
.services_list *::before,
.services_list *::after {
  box-sizing: border-box;
}

/* ---------- Row: intro | sub-services | case study ---------- */
.services_list-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--services_list-columns);
  column-gap: var(--services_list-gap);
  row-gap: 28px;
  align-items: start;
  padding: 34px 0 42px;
}

/* Top rule, drawn in on reveal */
.services_list-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--services_list-rule);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.38, 0.05, 0.2, 1);
}

/* ---------- Intro ---------- */
.services_list-intro {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: translate 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services_list-intro:hover,
.services_list-intro:focus {
  color: inherit;
  text-decoration: none;
}

.services_list-number {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--services_list-text);
}

.services_list-title {
  margin: 0;
  font-family: var(--services_list-font-serif);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--services_list-heading);
}

.services_list-description {
  margin: 16px 0 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--services_list-text);
  transition: color 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services_list-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  font-size: 15px;
  line-height: 1.6;
  color: var(--services_list-heading);
  transition: border-color 0.2s ease;
}

/* No page yet: grey text, no underline */
.services_list-cta--pending {
  display: inline-block;
  padding: 0;
  border: 0;
  line-height: 1.36;
  color: var(--services_list-text);
}

.services_list-arrow {
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
  transition: translate 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Linked intro: slides right with a vertical rule on hover */
.services_list-intro--link::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -24px;
  width: 1px;
  background: var(--services_list-heading);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services_list-intro--link:hover,
.services_list-intro--link:focus-visible {
  translate: 8px 0;
}

.services_list-intro--link:hover::before,
.services_list-intro--link:focus-visible::before {
  transform: scaleY(1);
}

.services_list-intro--link:hover .services_list-description,
.services_list-intro--link:focus-visible .services_list-description {
  color: var(--services_list-heading);
}

.services_list-intro--link:focus-visible {
  outline: 2px solid var(--services_list-focus);
  outline-offset: 10px;
}

/* ---------- Sub-services ---------- */
.services_list-sub {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.services_list-sub-item {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--services_list-rule);
  font-size: 15px;
  line-height: 1.28;
  color: var(--services_list-text);
  transition: color 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Case study card ---------- */
.services_list-case {
  display: block;
  margin-top: 8px;
  color: inherit;
  text-decoration: none;
}

.services_list-case:hover,
.services_list-case:focus {
  color: inherit;
  text-decoration: none;
}

.services_list-case:focus-visible {
  outline: 2px solid var(--services_list-accent);
  outline-offset: 8px;
}

.services_list-case-figure {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  margin-bottom: 16px;
  overflow: hidden;
  view-timeline-name: --services_list-case-figure;
  view-timeline-axis: block;
}

.services_list-case-img {
  position: absolute;
  top: -5%;
  left: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 110%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services_list-case-stat {
  display: block;
  margin-bottom: 7px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.28;
  color: var(--services_list-heading);
}

.services_list-case-label {
  border-bottom: 1px solid transparent;
  font-size: 15px;
  line-height: 1.36;
  color: var(--services_list-text);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.services_list-case-label .services_list-arrow {
  font-size: 0.86em;
}

/* ---------- Row hover: everything in the row darkens, arrows nudge ---------- */
.services_list-row:hover .services_list-sub-item,
.services_list-row:focus-within .services_list-sub-item {
  color: var(--services_list-heading);
}

.services_list-row:hover .services_list-cta,
.services_list-row:focus-within .services_list-cta {
  border-bottom-color: currentColor;
}

.services_list-row:hover .services_list-cta--pending,
.services_list-row:focus-within .services_list-cta--pending {
  border-bottom-color: transparent;
}

.services_list-row:hover .services_list-intro .services_list-arrow,
.services_list-row:focus-within .services_list-intro .services_list-arrow {
  translate: 5px 0;
}

.services_list-case:hover .services_list-case-img,
.services_list-case:focus-visible .services_list-case-img {
  transform: scale(1.06);
}

.services_list-case:hover .services_list-case-label,
.services_list-case:focus-visible .services_list-case-label {
  border-bottom-color: currentColor;
  color: var(--services_list-heading);
}

.services_list-case:hover .services_list-arrow,
.services_list-case:focus-visible .services_list-arrow {
  translate: 5px 0;
}

/* Case image drifts slightly as it scrolls past (where supported) */
@supports (animation-timeline: view()) {
  .services_list-case-img {
    animation: services_list-case-drift linear both;
    animation-timeline: --services_list-case-figure;
    animation-range: entry 0% exit 100%;
  }
}

@keyframes services_list-case-drift {
  from {
    translate: 0 -5%;
  }

  to {
    translate: 0 5%;
  }
}

/* ---------- Scroll reveal (module.js adds .is-hidden to rows below the fold) ---------- */
.services_list-row > * {
  transition: opacity 0.95s cubic-bezier(0.42, 0, 0.58, 1) var(--services_list-reveal-delay, 0s),
              translate 1.25s cubic-bezier(0.38, 0.05, 0.2, 1) var(--services_list-reveal-delay, 0s);
}

.services_list-row > :nth-child(1) {
  --services_list-reveal-delay: 0.06s;
}

.services_list-row > :nth-child(2) {
  --services_list-reveal-delay: 0.22s;
}

.services_list-row > :nth-child(3) {
  --services_list-reveal-delay: 0.3s;
}

.services_list-row.is-hidden::before {
  transform: scaleX(0);
}

.services_list-row.is-hidden > * {
  opacity: 0;
  translate: 0 30px;
}

/* ---------- Layout: tablet and phone ---------- */
@media (max-width: 1100px) {
  .services_list-intro {
    grid-column: 1 / -1;
  }

  .services_list-sub {
    grid-column: 1;
    margin-top: 0;
  }

  .services_list-case {
    grid-column: 2;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .services_list-sub,
  .services_list-case {
    grid-column: 1 / -1;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .services_list-row::before,
  .services_list-row > *,
  .services_list-intro,
  .services_list-intro::before,
  .services_list-arrow,
  .services_list-case-img,
  .services_list-case-label {
    transition: none;
  }

  .services_list-intro--link:hover {
    translate: 0 0;
  }

  .services_list-case-img {
    animation: none;
    top: 0;
    height: 100%;
  }

  .services_list-case:hover .services_list-case-img {
    transform: none;
  }
}