/* DIFWEB-286 — /ai-sdlc-methodology/ (Figma YHP2SMNoNGEJZJGN16fI3Z, frame
   22462:11693; desktop 1790 only, 1024/768/375 derived).

   Loaded ONLY by app/ai-sdlc-methodology/page.tsx, after service-v2.css (whose
   `.page.-service-v5` tokens and type classes it reuses). NOT part of
   styles.min.css, so PurgeCSS never touches it. Every rule is scoped under
   `.page.-service-v5.-methodology`, so no other route can be affected.

   Comp geometry in the comments is at the 1790 frame: the content column is
   the shared 1300px wrap (1348 for the section-03 panel); inner columns are
   1220 (sections 02/04), 1060 (04 list, 05, 08) and 772 (05 text, 06). */

.page.-service-v5.-methodology {
  /* D13: the comp's green #6CBF0D is 2.13:1 on #F5F5FB (italic title) and
     2.31:1 under white numerals. This deeper green is 4.53:1 / 4.92:1. */
  --mth-green: #427f06;
  --mth-border: #e8e8f2;
  --mth-dash: #e5e5e5;
  --mth-dash-strong: #bebebe;
}

/* The comp's header is the default dark-on-light bar (no `-service-team`), so
   restore the theme's 64px header clearance that service-v2.css removes. */
.page.-service-v5.-methodology .middle { padding-top: 64px; }

/* ---- Type ---------------------------------------------------------------- */
/* Headings/H5 (Gilroy Bold 20/24, -1%). */
.page.-service-v5.-methodology .mth-h5 {
  display: block;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--sv2-ink);
}
/* Section titles are Headings/H3 (32/36) in this comp, not the v2 H2 (40/48). */
.page.-service-v5.-methodology .sv2-head .sv2-h2 {
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
}
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-h5 { font-size: 18px; line-height: 22px; }
  .page.-service-v5.-methodology .sv2-head .sv2-h2 { font-size: 24px; line-height: 28px; letter-spacing: -0.48px; }
}

/* Dashed divider (05/06: the comp's 1px #B1B2C1 line, dasharray 2 2). */
.page.-service-v5.-methodology .mth-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px dashed var(--sv2-muted);
}

/* ---- 01. Hero (22462:11694) ---------------------------------------------- */
.page.-service-v5.-methodology .mth-hero { padding: 40px 0 80px; }
.page.-service-v5.-methodology .mth-hero__panel {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 496px;
  padding: 90px 40px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-panel-dark);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.page.-service-v5.-methodology .mth-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The comp's scrim, plus a top-weighted ink shade (60% → 35%): the copy is
   taller than the comp's (two-line h1 + the D2 sentence), so the 12px yellow
   eyebrow climbs into the bright whiteboard; the shade keeps every glyph above
   AA (per-glyph, measured after the fade-in). */
.page.-service-v5.-methodology .mth-hero__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 2, 16, 0.6) 0%, rgba(4, 2, 16, 0.35) 55%),
    linear-gradient(193.17deg, rgba(0, 0, 0, 0.08) 34.244%, #040210 71.486%);
  z-index: -1;
}
.page.-service-v5.-methodology .mth-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 710px;
}
.page.-service-v5.-methodology .mth-hero__text { display: flex; flex-direction: column; gap: 24px; }
.page.-service-v5.-methodology .mth-hero .sv2-eyebrow { color: var(--sv2-primary); }
.page.-service-v5.-methodology .mth-hero__title {
  margin: 0;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.64px;
  color: var(--sv2-white);
}
.page.-service-v5.-methodology .mth-hero .sv2-text-l,
.page.-service-v5.-methodology .mth-hero__definition { color: var(--sv2-white); }
.page.-service-v5.-methodology .mth-hero__definition { max-width: 620px; margin: 0 auto; }
.page.-service-v5.-methodology .mth-hero .sv2-pill { align-self: center; }
/* All three CTAs sit on dark panels, where the shared #131426 focus ring vanishes. */
.page.-service-v5.-methodology .mth-hero .sv2-pill:focus-visible,
.page.-service-v5.-methodology .sv2-banner .sv2-pill:focus-visible { outline-color: #fff; }
@media (max-width: 1279px) {
  .page.-service-v5.-methodology .mth-hero { padding-bottom: 64px; }
  .page.-service-v5.-methodology .mth-hero__panel { min-height: 0; padding: 72px 40px; }
}
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-hero { padding: 16px 0 40px; }
  .page.-service-v5.-methodology .mth-hero__panel { padding: 56px 24px; }
  .page.-service-v5.-methodology .mth-hero__copy { gap: 32px; }
  .page.-service-v5.-methodology .mth-hero__text { gap: 16px; }
  .page.-service-v5.-methodology .mth-hero .sv2-eyebrow { margin-bottom: 0; }
  .page.-service-v5.-methodology .mth-hero__title { font-size: 26px; line-height: 30px; letter-spacing: -0.52px; }
  .page.-service-v5.-methodology .mth-hero .sv2-pill__label { white-space: normal; }
}

/* ---- 02. Questions + answer card (22462:11707) --------------------------- */
.page.-service-v5.-methodology .mth-questions { padding: 0 0 64px; }
.page.-service-v5.-methodology .mth-questions .wrap-v4 > * { margin-left: 40px; margin-right: 40px; }
.page.-service-v5.-methodology .mth-questions .sv2-head { margin-bottom: 64px; }
.page.-service-v5.-methodology .mth-questions__body {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.page.-service-v5.-methodology .mth-questions__list {
  flex: 1 1 422px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page.-service-v5.-methodology .mth-questions__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px 24px 0;
  border-bottom: 1px dashed var(--mth-dash);
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--sv2-ink);
}
.page.-service-v5.-methodology .mth-questions__item img { width: 48px; height: 48px; }
.page.-service-v5.-methodology .mth-answer {
  flex: 0 1 750px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 48px;
  border: 1px solid var(--mth-border);
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
}
.page.-service-v5.-methodology .mth-answer__rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page.-service-v5.-methodology .mth-answer__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 24px 24px 0;
  border-bottom: 1px dashed var(--mth-dash);
}
.page.-service-v5.-methodology .mth-answer__text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.page.-service-v5.-methodology .mth-answer__title {
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--sv2-ink);
}
.page.-service-v5.-methodology .mth-answer__row img { flex: 0 0 64px; width: 64px; height: 64px; }
@media (max-width: 1279px) {
  .page.-service-v5.-methodology .mth-questions .wrap-v4 > * { margin-left: 0; margin-right: 0; }
  .page.-service-v5.-methodology .mth-questions .sv2-head { margin-bottom: 48px; }
  .page.-service-v5.-methodology .mth-questions__body { flex-direction: column; gap: 40px; }
  .page.-service-v5.-methodology .mth-questions__list {
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
  .page.-service-v5.-methodology .mth-answer { flex: none; width: 100%; }
}
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-questions { padding-bottom: 40px; }
  .page.-service-v5.-methodology .mth-questions .sv2-head { margin-bottom: 32px; }
  .page.-service-v5.-methodology .mth-questions__list { grid-template-columns: 1fr; gap: 20px; }
  .page.-service-v5.-methodology .mth-questions__item { padding: 0 0 20px; font-size: 18px; line-height: 22px; }
  .page.-service-v5.-methodology .mth-questions__item img { width: 40px; height: 40px; }
  .page.-service-v5.-methodology .mth-answer { gap: 32px; padding: 32px 20px; }
  .page.-service-v5.-methodology .mth-answer__row { padding-right: 0; }
  .page.-service-v5.-methodology .mth-answer__row img { flex-basis: 48px; width: 48px; height: 48px; }
}

/* ---- 03. What this means for you (22462:11734) --------------------------- */
.page.-service-v5.-methodology .mth-benefits { padding: 80px 0; }
.page.-service-v5.-methodology .mth-benefits__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 160px 64px 64px;
  border-radius: 40px;
  background: var(--sv2-panel-dark);
  overflow: hidden;
  isolation: isolate;
}
/* The comp's crop: the photo box is 124.78% × 137.19% of the panel at
   (-20.25%, -37.24%); object-fit keeps it undistorted at other widths. */
.page.-service-v5.-methodology .mth-benefits__bg {
  position: absolute;
  left: -20.25%;
  top: -37.24%;
  width: 124.78%;
  height: 137.19%;
  max-width: none;
  object-fit: cover;
  z-index: -2;
}
.page.-service-v5.-methodology .mth-benefits__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The comp's bottom fade, plus a left shade behind the title: the 40px
     white h2 fell to 2.9:1 on the lit wall panelling (measured). */
  background:
    linear-gradient(90deg, rgba(4, 2, 16, 0.45) 0%, rgba(4, 2, 16, 0) 60%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  z-index: -1;
}
.page.-service-v5.-methodology .mth-benefits .sv2-h2 { color: var(--sv2-bg-light); }
/* Five cards (D3): 3 + 2 on a six-column grid, so both rows fill the panel. */
.page.-service-v5.-methodology .mth-benefits__cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page.-service-v5.-methodology .mth-benefits__card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px;
  border-radius: var(--sv2-radius);
  /* Comp: white 4% + blur(32). At >=1280 the panel's left shade already keeps
     every glyph >=4.5:1 with the comp fill (body 5.8, titles 7.5, h2 5.2); the
     denser fill is only needed below 1280 (see the max-width block). */
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
}
.page.-service-v5.-methodology .mth-benefits__card:nth-child(n+4) { grid-column: span 3; }
.page.-service-v5.-methodology .mth-benefits__card img { width: 40px; height: 40px; }
.page.-service-v5.-methodology .mth-benefits__text { display: flex; flex-direction: column; gap: 16px; }
.page.-service-v5.-methodology .mth-benefits__text .mth-h5 { color: var(--sv2-bg-light); }
.page.-service-v5.-methodology .mth-benefits__text .sv2-text-m { color: rgba(245, 245, 251, 0.8); }
@media (min-width: 1400px) {
  /* The comp's panel is the full 1348 container, 24px wider than the wrap each side. */
  .page.-service-v5.-methodology .mth-benefits__panel { margin: 0 -24px; }
}
@media (max-width: 1279px) {
  .page.-service-v5.-methodology .mth-benefits { padding: 64px 0; }
  .page.-service-v5.-methodology .mth-benefits__panel { gap: 48px; padding: 96px 40px 40px; }
  .page.-service-v5.-methodology .mth-benefits__bg { left: 0; top: 0; width: 100%; height: 100%; object-position: 70% 30%; }
  /* Here the whole photo sits behind the copy (the title lands on the bright
     window): an even ink shade + a denser card fill keep every glyph ≥4.5:1. */
  .page.-service-v5.-methodology .mth-benefits__panel::after {
    background: linear-gradient(rgba(4, 2, 16, 0.55), rgba(4, 2, 16, 0.55)), linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  }
  .page.-service-v5.-methodology .mth-benefits__card { background: rgba(4, 2, 16, 0.5); }
  .page.-service-v5.-methodology .mth-benefits__cards { grid-template-columns: 1fr 1fr; }
  .page.-service-v5.-methodology .mth-benefits__card,
  .page.-service-v5.-methodology .mth-benefits__card:nth-child(n+4) { grid-column: auto; gap: 24px; }
  .page.-service-v5.-methodology .mth-benefits__card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-benefits { padding: 40px 0; }
  .page.-service-v5.-methodology .mth-benefits .wrap-v4 { padding-left: 8px; padding-right: 8px; }
  .page.-service-v5.-methodology .mth-benefits__panel { gap: 32px; padding: 64px 16px 16px; border-radius: 24px; }
  .page.-service-v5.-methodology .mth-benefits .sv2-h2 { padding: 0 8px; }
  .page.-service-v5.-methodology .mth-benefits__cards { grid-template-columns: 1fr; }
  .page.-service-v5.-methodology .mth-benefits__card { padding: 24px; }
}

/* ---- 04. The methodology in eight points (22462:11760) ------------------- */
.page.-service-v5.-methodology .mth-points { padding: 80px 0 64px; }
.page.-service-v5.-methodology .mth-points__title { margin: 0 0 80px; text-align: center; }
.page.-service-v5.-methodology .mth-points__title em { font-style: italic; color: var(--mth-green); }
.page.-service-v5.-methodology .mth-points__groups,
.page.-service-v5.-methodology .mth-loop { max-width: 1060px; margin-left: auto; margin-right: auto; }
.page.-service-v5.-methodology .mth-points__groups { display: flex; flex-direction: column; gap: 56px; }
.page.-service-v5.-methodology .mth-points__group {
  display: flex;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--mth-dash-strong);
}
.page.-service-v5.-methodology .mth-points__group:last-child { border-bottom: 0; }
.page.-service-v5.-methodology .mth-points__question { flex: 0 0 308px; padding: 0 24px 24px 0; margin: 0; }
.page.-service-v5.-methodology .mth-points__list {
  flex: 1 1 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 24px;
  list-style: none;
}
.page.-service-v5.-methodology .mth-points__point { display: flex; gap: 16px; }
.page.-service-v5.-methodology .mth-points__num {
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--mth-green);
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--sv2-white);
}
.page.-service-v5.-methodology .mth-points__text { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }

/* "The loop" (22466:12328) — D5: a <blockquote>, the chips an <ol>. */
.page.-service-v5.-methodology .mth-loop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 80px;
  margin-bottom: 0;
  padding: 48px;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
  text-align: center;
}
.page.-service-v5.-methodology .mth-loop__steps {
  display: flex;
  align-self: stretch;
  gap: 12px;
  margin: 0;
  padding: 24px 0;
  list-style: none;
}
.page.-service-v5.-methodology .mth-loop__step { flex: 1; display: flex; align-items: center; gap: 12px; }
.page.-service-v5.-methodology .mth-loop__arrow { flex: 0 0 16px; width: 16px; height: 16px; }
.page.-service-v5.-methodology .mth-loop__chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 102px;
  padding: 16px 24px;
  border-radius: 16px;
  font-family: var(--sv2-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: var(--sv2-ink);
}
.page.-service-v5.-methodology .mth-loop__step.-s1 .mth-loop__chip { background: #a5deee; }
.page.-service-v5.-methodology .mth-loop__step.-s2 .mth-loop__chip { background: #eed3a5; }
.page.-service-v5.-methodology .mth-loop__step.-s3 .mth-loop__chip { background: #beeea5; }
.page.-service-v5.-methodology .mth-loop__step.-s4 .mth-loop__chip { background: #edeea5; }
.page.-service-v5.-methodology .mth-loop__step.-s5 .mth-loop__chip { background: #b4a5ee; }
.page.-service-v5.-methodology .mth-loop__caption {
  font-family: var(--sv2-font-text);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.12px;
  color: rgba(19, 20, 38, 0.64);
}
/* Arrows sit between chips: steps 2–5 are wider by the arrow + gap. */
.page.-service-v5.-methodology .mth-loop__step:not(.-s1) { flex-grow: 1.18; }
@media (max-width: 1279px) {
  .page.-service-v5.-methodology .mth-points { padding: 64px 0 48px; }
  .page.-service-v5.-methodology .mth-points__title { margin-bottom: 56px; }
  .page.-service-v5.-methodology .mth-points__question { flex-basis: 240px; }
  .page.-service-v5.-methodology .mth-loop { margin-top: 56px; padding: 40px 24px; }
  .page.-service-v5.-methodology .mth-loop__chip { padding: 16px 12px; }
}
@media (max-width: 1023px) {
  .page.-service-v5.-methodology .mth-points__groups { gap: 40px; }
  .page.-service-v5.-methodology .mth-points__group { flex-direction: column; gap: 16px; }
  .page.-service-v5.-methodology .mth-points__question { flex: none; padding: 0; }
  .page.-service-v5.-methodology .mth-points__list { flex: none; }
  /* The chips stack vertically, arrows turned down. */
  .page.-service-v5.-methodology .mth-loop__steps { flex-direction: column; align-items: center; gap: 8px; }
  .page.-service-v5.-methodology .mth-loop__step,
  .page.-service-v5.-methodology .mth-loop__step:not(.-s1) { flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
  .page.-service-v5.-methodology .mth-loop__arrow { transform: rotate(90deg); }
  .page.-service-v5.-methodology .mth-loop__chip { align-self: stretch; min-height: 0; padding: 14px 20px; }
}
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-points { padding: 48px 0 40px; }
  .page.-service-v5.-methodology .mth-points__title { margin-bottom: 40px; font-size: 26px; line-height: 30px; }
  .page.-service-v5.-methodology .mth-points__point { gap: 12px; }
  .page.-service-v5.-methodology .mth-points__num { flex-basis: 28px; width: 28px; height: 28px; font-size: 16px; }
  .page.-service-v5.-methodology .mth-points__text { padding-top: 2px; gap: 8px; }
  .page.-service-v5.-methodology .mth-loop { margin-top: 40px; padding: 32px 16px; }
}

/* ---- 05. Platform (22462:11783) ------------------------------------------ */
.page.-service-v5.-methodology .mth-platform { padding: 40px 0 64px; }
.page.-service-v5.-methodology .mth-platform .wrap-v4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.page.-service-v5.-methodology .mth-platform .mth-divider,
.page.-service-v5.-methodology .mth-platform__art { max-width: 1060px; }
.page.-service-v5.-methodology .mth-platform__art {
  display: flex;
  justify-content: center;
  width: 100%;
  border-radius: var(--sv2-radius);
  background: var(--sv2-white);
  overflow: hidden;
}
/* Comp: the illustration is 79.13% of the 1060 panel (839px) and the panel
   is 274.6 tall; the export is pre-cropped to that 3.05:1 window. */
.page.-service-v5.-methodology .mth-platform__art img { width: 79.13%; height: auto; }
.page.-service-v5.-methodology .mth-platform__text {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 772px;
}
.page.-service-v5.-methodology .mth-platform__head { display: flex; flex-direction: column; gap: 16px; }
.page.-service-v5.-methodology .mth-platform__cols { display: flex; gap: 80px; }
.page.-service-v5.-methodology .mth-platform__col { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
@media (max-width: 1023px) {
  .page.-service-v5.-methodology .mth-platform__cols { gap: 40px; }
}
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-platform { padding: 24px 0 40px; }
  .page.-service-v5.-methodology .mth-platform .wrap-v4 { gap: 32px; }
  .page.-service-v5.-methodology .mth-platform__art img { width: 100%; }
  .page.-service-v5.-methodology .mth-platform__text { gap: 32px; }
  .page.-service-v5.-methodology .mth-platform__cols { flex-direction: column; gap: 16px; }
  .page.-service-v5.-methodology .mth-platform__col { padding-bottom: 0; }
}

/* ---- 06. How a project runs (22462:11904) -------------------------------- */
.page.-service-v5.-methodology .mth-steps { padding: 0 0 64px; }
.page.-service-v5.-methodology .mth-steps__col {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 772px;
  margin: 0 auto;
}
.page.-service-v5.-methodology .mth-steps__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.page.-service-v5.-methodology .mth-steps__step { display: flex; gap: 24px; }
/* Rail: the 24px check, then (gap 10) a 1px dashed connector down to the
   next step; the last ends in a small arrowhead. */
.page.-service-v5.-methodology .mth-steps__rail {
  position: relative;
  flex: 0 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.page.-service-v5.-methodology .mth-steps__rail::after {
  content: "";
  flex: 1;
  width: 0;
  border-left: 1px dashed var(--sv2-muted);
}
.page.-service-v5.-methodology .mth-steps__step:last-child .mth-steps__rail::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--sv2-muted);
  border-bottom: 1px solid var(--sv2-muted);
  transform: translate(-50%, -1px) rotate(45deg);
}
.page.-service-v5.-methodology .mth-steps__rail img { flex: 0 0 24px; width: 24px; height: 24px; }
.page.-service-v5.-methodology .mth-steps__text { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }
/* Comp 22462:11947: the last step has no bottom padding. */
.page.-service-v5.-methodology .mth-steps__step:last-child .mth-steps__text { padding-bottom: 0; }
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-steps { padding-bottom: 40px; }
  .page.-service-v5.-methodology .mth-steps__col { gap: 32px; }
  .page.-service-v5.-methodology .mth-steps__step { gap: 16px; }
  .page.-service-v5.-methodology .mth-steps__text { padding-bottom: 24px; }
}

/* ---- 07 + 10. Photo banners (CtaBannerV2, scoped) ------------------------ */
/* Comp: 64px panel padding (not the service comps' 90), the H3 32/36 title
   and a 710px copy column. */
.page.-service-v5.-methodology .sv2-banner__panel { padding: 64px 40px; }
.page.-service-v5.-methodology .sv2-banner__copy { max-width: 710px; }
.page.-service-v5.-methodology .sv2-banner__text .sv2-h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.64px; }
/* 10 follows the white FAQ section. */
.page.-service-v5.-methodology .faq + .sv2-banner { background: var(--sv2-white); }
@media (max-width: 767px) {
  .page.-service-v5.-methodology .sv2-banner__panel { padding: 48px 20px; }
  .page.-service-v5.-methodology .sv2-banner__text .sv2-h2 { font-size: 24px; line-height: 28px; letter-spacing: -0.48px; }
}

/* ---- 08. Who this is for (22462:11971) ----------------------------------- */
.page.-service-v5.-methodology .mth-audience {
  padding: 80px 0;
  background: linear-gradient(to bottom, var(--sv2-bg-light), var(--sv2-white));
}
.page.-service-v5.-methodology .mth-audience .wrap-v4 { max-width: 1140px; }
.page.-service-v5.-methodology .mth-audience__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 740px;
  margin: 0 auto 80px;
  text-align: center;
}
.page.-service-v5.-methodology .mth-audience__head .sv2-text-l { color: var(--sv2-ink); }
.page.-service-v5.-methodology .mth-audience__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page.-service-v5.-methodology .mth-audience__item { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.page.-service-v5.-methodology .mth-audience__item img { width: 124px; height: 124px; }
.page.-service-v5.-methodology .mth-audience__text { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1023px) {
  .page.-service-v5.-methodology .mth-audience { padding: 64px 0; }
  .page.-service-v5.-methodology .mth-audience__head { margin-bottom: 48px; }
  .page.-service-v5.-methodology .mth-audience__items { gap: 32px; }
}
@media (max-width: 767px) {
  .page.-service-v5.-methodology .mth-audience { padding: 48px 0; }
  .page.-service-v5.-methodology .mth-audience__head { margin-bottom: 32px; }
  .page.-service-v5.-methodology .mth-audience__items { grid-template-columns: 1fr; gap: 24px; }
  .page.-service-v5.-methodology .mth-audience__item { flex-direction: row; align-items: flex-start; gap: 16px; padding-bottom: 0; }
  .page.-service-v5.-methodology .mth-audience__item img { flex: 0 0 72px; width: 72px; height: 72px; }
}

/* ---- 09. FAQ (FaqSection variant="faq", scoped) -------------------------- */
/* The comp breaks the title into two lines ("Frequently / Asked Questions"),
   not the service pages' three (their `width: min-content`). */
.page.-service-v5.-methodology .faq .left .faq-heading { width: auto; max-width: 244px; }