.fenix-services-tech__mobile-break { display: none; }
html:lang(ja) body.fenix-figma-services-page .fenix-services-heading p {
  width: 100%;
  max-width: 100%;
}
html body .fenix-services-page .fenix-services-tech__notice {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding: 24px 12px;
  border-radius: 12px;
  background: var(--fenix-primary-50);
  box-shadow: inset 0 0 0 1px var(--fenix-primary-200), 0 12px 24px rgb(41 19 100 / 9%);
}
.fenix-services-page .fenix-services-tech__notice-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: url("../../svg/services-pc/Vector-I2586-16692-2086-2687.svg") center / 29px 29px no-repeat;
}
.fenix-services-page .fenix-services-tech__notice p {
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) and (max-width: 1279px) {
  html body .fenix-services-page .fenix-services-tech__notice { margin-top: 36px; }
  .fenix-services-page .fenix-services-tech__notice p { font-size: 15px; line-height: 22px; }
}
@media (max-width: 767px) {
  .fenix-services-tech__mobile-break { display: initial; }
  html body .fenix-services-page .fenix-services-tech__notice { margin-top: 32px; }
  .fenix-services-page .fenix-services-tech__notice p { font-size: 14px; line-height: 20px; }
}

/* Japanese process copy has separate break positions in each handoff frame. */
.fenix-services-page .fenix-home-devflow__heading br { display: none; }
html:lang(ja) body.fenix-figma-services-page .fenix-services-page .fenix-home-devflow__heading p {
  text-align: center !important;
}
@media (min-width: 1280px), (max-width: 767px) {
  .fenix-services-page .fenix-home-devflow__heading .fenix-services-process-break--desktop-mobile { display: initial; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .fenix-services-page .fenix-home-devflow__heading .fenix-services-process-break--tablet { display: initial; }
}
@media (max-width: 767px) {
  .fenix-services-page .fenix-home-devflow__heading .fenix-services-process-break--mobile { display: initial; }
}

/* Explicit breaks from the cropped Services detail frames. */
.fenix-services-detail .fenix-services-break--desktop,
.fenix-services-detail .fenix-services-break--mobile { display: none; }
.fenix-services-detail__item-copy { min-width: 0; }
.fenix-services-detail__media {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--fenix-neutral-50, #f7f7f7);
}
.fenix-services-detail__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(90 41 187 / 0%) 0%, rgb(90 41 187 / 40%) 100%);
}
.fenix-services-detail__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.fenix-services-detail__intro h3 {
  width: 100%;
  margin: 0;
  color: var(--fenix-primary-700, #291364);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}
.fenix-services-detail__items h4 {
  width: 100%;
  margin: 0;
  color: var(--fenix-neutral-900);
  font-size: var(--fenix-text-body-size);
  font-weight: 700;
  line-height: var(--fenix-text-body-line-height);
}
@media (min-width: 1280px) {
  .fenix-services-detail .fenix-services-break--desktop { display: initial; }
}
@media (max-width: 767px) {
  .fenix-services-detail .fenix-services-break--mobile { display: initial; }
}

/* Services responsive exports: tablet 2298:12953 and mobile 2298:14714.
 * Page geometry lives here. Header and input instances retain shared owners. */
@media (max-width: 1279px) {
  html body.fenix-figma-services-page {
    --fenix-footer-page-gap: 0px;
    --services-margin: 16px;
    --services-section-gap: 64px;
    --services-heading-size: 32px;
    --services-heading-line: 40px;
    --services-copy-size: 14px;
    --services-copy-line: 22px;
    --services-body-size: 14px;
    --services-body-line: 20px;
    --services-hero-size: 52px;
    --services-hero-line: 60px;
    --services-hero-height: 394px;
    --services-hero-top: 140px;
    --services-hero-gap: 48px;
    --services-heading-gap: 12px;
    --services-detail-gap: 32px;
    --services-row-gap: 64px;
    --services-index-size: 14px;
    --services-index-line: 22px;
    --services-process-padding: 48px;
    --services-process-gap: 32px;
    --services-tile-height: 144px;
    --services-tech-heading-gap: 28px;
    --services-tech-title-size: 18px;
    --services-tech-title-line: 24px;
    --services-contact-padding: 64px;
    --services-band-gradient: linear-gradient(180deg, rgb(41 19 100 / 84%) 22.667%, rgb(94 45 158 / 84%) 121.212%);
    --fenix-text-body-size: 14px;
    --fenix-text-body-line-height: 20px;
    --fenix-text-body-small-size: 12px;
    --fenix-text-body-small-line-height: 16px;
    --fenix-text-button-size: 14px;
    --fenix-text-button-line-height: 20px;
    --button-font-size: 14px;
    --button-line-height: 20px;
  }

  html body.fenix-figma-services-page .fenix-services-page {
    padding: 94px 0 0 !important;
    gap: var(--services-section-gap) !important;
  }
  html body.fenix-figma-services-page .fenix-services-page > section {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.fenix-figma-services-page.fenix-figma-shell-page .fenix-services-page > :is(.fenix-services-detail, .fenix-services-tech) { padding: 0 !important; }
  html body.fenix-figma-services-page :is(.fenix-services-shell, .fenix-services-detail__shell, .fenix-services-tech__shell, .fenix-home-devflow__inner, .fenix-home-contact-form > .fenix-home-shell, .fenix-footer__inner) {
    width: calc(100% - 2 * var(--services-margin)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }
  html body.fenix-figma-services-page .fenix-services-page > .fenix-services-hero {
    min-height: var(--services-hero-height) !important;
  }
  html body.fenix-figma-services-page .fenix-services-hero .fenix-services-shell {
    align-self: flex-start;
    margin-block: var(--services-hero-top) 80px !important;
    min-height: calc(var(--services-hero-height) - var(--services-hero-top) - 80px) !important;
  }
  html body.fenix-figma-services-page .fenix-services-hero h1 {
    margin: 0 0 var(--services-hero-gap) !important;
    font-size: var(--services-hero-size) !important;
    line-height: var(--services-hero-line) !important;
    font-weight: 700 !important;
  }
  html body.fenix-figma-services-page .fenix-services-hero__scrim {
    background: linear-gradient(180deg, var(--fenix-neutral-900), transparent) top / 100% 212px no-repeat,
      linear-gradient(90deg, rgb(90 41 187 / 80%) 25.85%, transparent 74.15%), rgb(3 5 55 / 43%);
  }
  html body.fenix-figma-services-page :is(.fenix-services-hero p, .fenix-services-heading p, .fenix-home-devflow__heading p, .fenix-home-contact-form__copy p) {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 66px !important;
    margin: 0 !important;
    font-size: var(--services-copy-size) !important;
    line-height: var(--services-copy-line) !important;
    font-weight: 400 !important;
  }
  html body.fenix-figma-services-page :is(.fenix-services-detail__shell > h2, .fenix-services-heading h2, .fenix-home-devflow__heading h2, .fenix-home-contact-form__copy h2) {
    width: 100% !important;
    height: auto !important;
    min-height: var(--services-heading-line) !important;
    margin: 0 !important;
    font-size: var(--services-heading-size) !important;
    line-height: var(--services-heading-line) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  html body.fenix-figma-services-page :is(.fenix-services-heading, .fenix-home-devflow__heading, .fenix-home-contact-form__copy) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: var(--services-heading-gap) !important;
    margin: 0 !important;
  }
  html body.fenix-figma-services-page .fenix-services-detail__list {
    margin-top: var(--services-detail-gap);
    gap: var(--services-row-gap) !important;
  }
  html body.fenix-figma-services-page .fenix-services-detail__row {
    flex-direction: column !important;
    gap: 32px !important;
  }
  html body.fenix-figma-services-page .fenix-services-detail__media { width: 100%; height: auto; aspect-ratio: 704 / 496; flex: none; }
  html body.fenix-figma-services-page .fenix-services-detail__row:nth-child(2) .fenix-services-detail__media { aspect-ratio: 704 / 520; }
  html body.fenix-figma-services-page .fenix-services-detail__content {
    width: 100% !important;
    gap: 40px !important;
  }
  html body.fenix-figma-services-page .fenix-services-detail__intro { gap: 16px; }
  html body.fenix-figma-services-page .fenix-services-detail__intro h3 { font-size: 20px; line-height: 28px; }
  html body.fenix-figma-services-page :is(.fenix-services-detail__intro p, .fenix-services-detail__items h4, .fenix-services-detail__items li) {
    font-size: var(--services-body-size) !important;
    line-height: var(--services-body-line) !important;
  }
  html body.fenix-figma-services-page .fenix-services-detail__items ul { gap: 32px; padding-top: 16px; border: 0; }
  html body.fenix-figma-services-page .fenix-services-detail__items li { position: relative; min-height: 52px; padding: 0; border: 0; }
  html body.fenix-figma-services-page .fenix-services-detail__items li::before {
    content: ""; position: absolute; top: -16px; inset-inline: 0; height: 1px; background: var(--fenix-neutral-300);
  }
  html body.fenix-figma-services-page .fenix-services-list-icon { width: 52px; height: 52px; flex-basis: 52px; }
  html body.fenix-figma-services-page :is(.fenix-services-list-icon > span, .fenix-tech-group__icon > svg) { display: none; }

  html body.fenix-figma-services-page .fenix-services-page > .fenix-home-devflow--dark {
    padding-block: var(--services-process-padding) !important;
    background: var(--services-process-paint) center / 100% 100% no-repeat,
      var(--services-band-gradient), var(--fenix-neutral-900) !important;
  }
  html body.fenix-figma-services-page .fenix-home-devflow__inner { display: flex !important; flex-direction: column !important; gap: var(--services-process-gap) !important; }
  html body.fenix-figma-services-page .fenix-home-devflow__diagram {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; padding: 0 !important; gap: 4px !important; overflow: visible !important;
  }
  html body.fenix-figma-services-page .fenix-home-devflow__group {
    position: static !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; padding: 24px 0 !important; gap: 20px !important;
    flex: 0 0 auto !important;
  }
  html body.fenix-figma-services-page .fenix-home-devflow__group h3 {
    height: auto !important; min-height: var(--services-body-line) !important;
    font-size: var(--services-body-size) !important; line-height: var(--services-body-line) !important;
    color: var(--fenix-primary-50) !important;
  }
  html body.fenix-figma-services-page .fenix-home-devflow__stack {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important; gap: 20px !important;
  }
  html body.fenix-figma-services-page .fenix-home-devflow__group--5 .fenix-home-devflow__stack { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  html body.fenix-figma-services-page .fenix-home-devflow__tile {
    width: 100% !important; height: auto !important; min-height: var(--services-tile-height) !important;
    padding: 24px 12px !important; gap: 16px !important; border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--fenix-primary-200), 0 12px 24px rgb(41 19 100 / 9%) !important;
  }
  html body.fenix-figma-services-page .fenix-home-devflow__tile > img { width: 60px !important; height: 60px !important; flex: 0 0 60px !important; }
  html body.fenix-figma-services-page .fenix-home-devflow__tile p { height: auto !important; font-size: var(--services-body-size) !important; line-height: var(--services-body-line) !important; font-weight: 400 !important; }
  html body.fenix-figma-services-page .fenix-home-devflow__arrow {
    position: static !important; inset: auto !important; align-self: center !important; flex: 0 0 36px !important;
    width: 36px !important; height: 36px !important; transform: none !important;
  }
  html body.fenix-figma-services-page .fenix-home-devflow__loop { top: 50% !important; bottom: auto !important; left: calc(100% + 10px) !important; transform: translate(-50%, -50%) !important; }
  html body.fenix-figma-services-page .fenix-home-devflow__group--5 .fenix-home-devflow__loop { left: calc(200% + 16.333px) !important; }

  html body.fenix-figma-services-page .fenix-services-heading { margin-bottom: var(--services-tech-heading-gap) !important; }
  html body.fenix-figma-services-page .fenix-tech-groups { gap: 48px !important; }
  html body.fenix-figma-services-page .fenix-tech-group {
    position: relative; grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; padding: 0 !important; border: 0 !important;
  }
  html body.fenix-figma-services-page .fenix-tech-group:not(:last-child)::after { content: ""; position: absolute; bottom: -24px; inset-inline: 0; height: 1px; background: var(--fenix-neutral-200); }
  html body.fenix-figma-services-page .fenix-tech-group h3 { width: 100% !important; min-height: 32px !important; gap: 20px !important; font-size: var(--services-tech-title-size) !important; line-height: var(--services-tech-title-line) !important; font-weight: 700 !important; }
  html body.fenix-figma-services-page .fenix-tech-group__icon { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  html body.fenix-figma-services-page .fenix-tech-grid {
    width: 100% !important; grid-template-columns: repeat(5, 120.8px) !important;
    grid-auto-rows: 120px; gap: 12px !important; padding-bottom: 4px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-inline: contain;
  }
  html body.fenix-figma-services-page .fenix-tech-grid:focus-visible { outline: 2px solid var(--fenix-primary-300); outline-offset: 4px; }
  html body.fenix-figma-services-page .fenix-tech-grid::-webkit-scrollbar { display: none; }
  html body.fenix-figma-services-page .fenix-tech-item {
    width: 100% !important; min-height: 120px !important; height: 120px !important;
    padding: 16px 12px !important; gap: 16px !important; border: 0 !important; border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px var(--fenix-primary-200);
  }
  html body.fenix-figma-services-page .fenix-tech-item__logo { height: 52px !important; flex: 0 0 52px !important; }
  html body.fenix-figma-services-page .fenix-tech-item > span { height: var(--services-body-line) !important; flex: 0 0 var(--services-body-line) !important; font-size: var(--services-body-size) !important; line-height: var(--services-body-line) !important; white-space: nowrap; }
  html body.fenix-figma-services-page .fenix-tech-group:nth-child(4) .fenix-tech-grid { grid-template-columns: 167px !important; }
  html body.fenix-figma-services-page .fenix-tech-group:nth-child(4) .fenix-tech-item { width: 167px !important; }

  html body.fenix-figma-services-page .fenix-services-page > .fenix-home-contact-form {
    padding: var(--services-contact-padding) 0 !important;
    background: var(--services-contact-paint) center / 100% 100% no-repeat,
      var(--services-band-gradient), var(--fenix-neutral-900) !important;
  }
  html body.fenix-figma-services-page :is(.fenix-home-devflow__heading p, .fenix-home-contact-form__copy p) { color: var(--fenix-primary-50) !important; }
  html body.fenix-figma-services-page .fenix-home-contact-form > .fenix-home-shell { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 48px !important; }
  html body.fenix-figma-services-page .fenix-home-contact-form__copy { flex: 0 0 auto !important; }
  html body.fenix-figma-services-page .fenix-home-contact-form__copy p { min-height: 44px !important; max-width: 475px !important; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  html body.fenix-figma-services-page {
    --services-margin: 32px;
    --services-section-gap: 120px;
    --services-heading-size: 40px;
    --services-heading-line: 48px;
    --services-copy-size: 18px;
    --services-copy-line: 24px;
    --services-body-size: 15px;
    --services-body-line: 22px;
    --services-hero-size: 64px;
    --services-hero-line: 72px;
    --services-hero-height: 428px;
    --services-hero-top: 152px;
    --services-hero-gap: 56px;
    --services-heading-gap: 16px;
    --services-detail-gap: 48px;
    --services-row-gap: 72px;
    --services-index-size: 18px;
    --services-index-line: 24px;
    --services-process-padding: 64px;
    --services-process-gap: 48px;
    --services-tile-height: 146px;
    --services-tech-heading-gap: 36px;
    --services-tech-title-size: 20px;
    --services-tech-title-line: 28px;
    --services-contact-padding: 72px;
    --fenix-text-body-size: 15px;
    --fenix-text-body-line-height: 22px;
    --fenix-text-body-small-size: 13px;
    --fenix-text-body-small-line-height: 18px;
    --fenix-text-button-size: 15px;
    --fenix-text-button-line-height: 22px;
    --button-font-size: 15px;
    --button-line-height: 22px;
  }
  html body.fenix-figma-services-page .fenix-services-hero .fenix-services-shell {
    margin-bottom: 100px !important;
    min-height: 176px !important;
  }
  html body.fenix-figma-services-page .fenix-services-detail__row { gap: 72px !important; }
  html body.fenix-figma-services-page .fenix-services-detail__intro h3 { font-size: 24px; line-height: 32px; }
  html body.fenix-figma-services-page :is(.fenix-services-hero p, .fenix-services-heading p, .fenix-home-devflow__heading p, .fenix-home-contact-form__copy p) { min-height: 48px !important; }
  html body.fenix-figma-services-page .fenix-home-devflow__group--5 .fenix-home-devflow__stack { gap: 20px !important; }
  html body.fenix-figma-services-page .fenix-home-devflow__group--5 .fenix-home-devflow__loop { left: calc(200% + 29.333px) !important; }
  html body.fenix-figma-services-page .fenix-tech-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-rows: 122px; padding-bottom: 2px; }
  html body.fenix-figma-services-page .fenix-tech-item { min-height: 122px !important; height: 122px !important; }
  html body.fenix-figma-services-page .fenix-tech-group:nth-child(4) .fenix-tech-grid { grid-template-columns: 177px !important; }
  html body.fenix-figma-services-page .fenix-tech-group:nth-child(4) .fenix-tech-item { width: 177px !important; }
}