/* Dedicated layouts for the four unified mobile confirmation sheets. */
.service-page-mobile {
  --mobile-gold: #ffe5a0;
  --mobile-rose: #f64580;
  margin-inline: auto;
  background: radial-gradient(ellipse at 45% 0%, #6c112b, #26020c 65%);
}
.service-page-mobile h2 { font-size: clamp(1.15rem, 4.6vw, 3.1rem); }
.service-page-mobile .service-section { padding: clamp(.9rem, 2.5vw, 2.25rem) 3.2%; }
.service-page-mobile .service-section::after {
  height: clamp(5px, 1.8vw, 24px);
  inset-inline: 0;
  background: url('/assets/mobile-services/section-ribbon.webp') center / 100% 100% no-repeat;
  box-shadow: none;
}
.service-page-mobile .service-hero { min-height: clamp(7.1rem, 30vw, 24rem); }
.service-page-mobile .service-hero > .service-hero-primary { opacity: 1; width: 49%; }
.service-page-mobile .hero-words { width: 66%; padding: .8em 0 .8em 2.25%; }
.service-page-mobile .hero-words h1 { font-size: clamp(1.8rem, 8.4vw, 6.5rem); }
.service-page-mobile .hero-words > p { font-size: clamp(.75rem, 3vw, 2.2rem); }
.service-page-mobile .hero-words strong { font-size: clamp(.75rem, 3.05vw, 2.2rem); padding-inline: .65em; }
.service-page-mobile .hero-words ul { font-size: clamp(.63rem,2.4vw,1.55rem); gap: .2em .55em; }
.service-page-mobile img.service-icon { object-fit: contain; }
.service-page-mobile .service-intro {
  grid-template-columns: 32% minmax(0,1fr);
  gap: 3%;
  margin: 0;
  padding: 3% 4%;
}
.service-page-mobile .service-intro > img { height: auto; aspect-ratio: auto; }
.service-page-mobile .service-intro h2 { font-size: clamp(1rem,4vw,2.5rem); }
.service-page-mobile .service-intro p { font-size: clamp(.76rem,2.9vw,1.75rem); }
.service-page-mobile .service-steps,
.service-page-mobile .service-benefits,
.service-page-mobile .service-methods ul { gap: .42rem; }
.service-page-mobile .service-steps > li,
.service-page-mobile .service-benefits > li,
.service-page-mobile .service-methods li {
  padding: .42em .12em;
  font-size: clamp(.68rem, 2.5vw, 1.55rem);
  overflow-wrap: anywhere;
}
.service-page-mobile .service-steps h3,
.service-page-mobile .service-benefits h3,
.service-page-mobile .service-methods h3 {
  font-size: clamp(.75rem, 2.85vw, 1.7rem);
  overflow-wrap: anywhere;
}
.service-page-mobile .service-subtitle { font-size: clamp(.8rem,3.15vw,2.1rem); }
.service-page-mobile .service-videos { gap: .5rem; }
.service-page-mobile .service-videos figcaption {
  font-size: clamp(.72rem,2.65vw,1.75rem);
  padding: .28em .42em;
  overflow-wrap: anywhere;
}
.service-page-mobile .service-articles h3 { font-size: clamp(.91rem,3.05vw,1.95rem); }
.service-page-mobile .service-articles p { font-size: clamp(.79rem,2.65vw,1.72rem); }
.service-page-mobile .service-articles a { font-size: clamp(.76rem,2.5vw,1.65rem); padding: .26em .75em; }

/* 小三上位 */
.service-page-mobile.service-relationship .service-hero > .service-hero-primary {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 19% 100%, 19% 70%, 0 70%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.service-page-mobile.service-relationship .hero-words { width: 62%; }
.service-page-mobile.service-relationship .hero-words h1 { font-size: clamp(1.36rem, 5.8vw, 4.5rem); }
.service-page-mobile.service-relationship .hero-words strong { padding-inline: .45em; }
.service-page-mobile.service-relationship .service-steps,
.service-page-mobile.service-relationship .service-benefits,
.service-page-mobile.service-commitment .service-steps { grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-flow: row; }
.service-page-mobile.service-relationship .service-steps > li { padding-block: 0 .42em; }
.service-page-mobile.service-relationship .service-steps h3 {
  font-size: clamp(.65rem, 2.45vw, 1.6rem);
  gap: .16em;
  justify-content: center;
  margin-inline: .08em;
  padding-inline: 0;
}
.service-page-mobile.service-relationship .service-step-number { flex: 0 0 auto; white-space: nowrap; }
.service-page-mobile.service-relationship .service-videos {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.service-page-mobile.service-relationship .service-videos figure:first-child {
  grid-column: 1 / -1;
  grid-row: auto;
}
.service-page-mobile.service-relationship .service-videos figure:first-child img { aspect-ratio: 2.9; }
.service-page-mobile.service-relationship .service-videos figure:not(:first-child) img { aspect-ratio: 1; }
.service-page-mobile.service-relationship .service-videos figcaption { min-width: 0; }
.service-page-mobile.service-relationship .service-articles { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; }
.service-page-mobile.service-relationship .service-articles img { aspect-ratio: 2.2; }
.service-page-mobile.service-relationship .service-articles h3 { font-size: clamp(.76rem,2.65vw,1.72rem); }
.service-page-mobile.service-relationship .service-articles p { font-size: clamp(.7rem,2.55vw,1.65rem); }
.service-page-mobile .service-methods ul { grid-template-columns: repeat(5,minmax(0,1fr)); grid-auto-flow: row; }
.service-page-mobile .service-methods li {
  padding-inline: .1em;
  border-radius: 48%;
  aspect-ratio: .88;
  background: radial-gradient(ellipse at 50% 10%,#b7294d,#49071a 73%);
}

/* 情人转正 */
.service-page-mobile.service-commitment .service-hero > .service-hero-primary {
  mask-image: linear-gradient(90deg, transparent, #000 17%);
}
.service-page-mobile.service-commitment .hero-words { width: 57%; }
.service-page-mobile.service-commitment .hero-words ul { gap: .2em .3em; }
.service-page-mobile.service-commitment .service-intro {
  margin-inline: 3%;
  padding: 2.2%;
  border-radius: clamp(1.4rem,10vw,7rem);
}
.service-page-mobile.service-commitment .service-intro > img { border-radius: 7vw 0 0 7vw; aspect-ratio: 1; }
.service-page-mobile.service-commitment .service-qualifiers {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .55rem;
  padding: 2.2% 3%;
}
.service-page-mobile.service-commitment .service-qualifiers h2 {
  font-size: clamp(.87rem, 3.2vw, 2.4rem);
  margin-block: .15em .36em;
}
.service-page-mobile.service-commitment .service-qualifiers section > div {
  grid-template-columns: 1fr;
  font-size: clamp(.7rem, 2.65vw, 1.75rem);
  line-height: 1.48;
}
.service-page-mobile.service-commitment .service-qualifiers img { aspect-ratio: 2.25; }
.service-page-mobile.service-commitment .service-videos {
  grid-template-columns: minmax(0,1.03fr) minmax(0,1fr);
}
.service-page-mobile.service-commitment .service-video-list > div { gap: .28rem; }
.service-page-mobile.service-commitment .service-video-feature img { aspect-ratio: 1.4; }
.service-page-mobile.service-commitment .service-video-list h3 small { display: block; }
.service-page-mobile.service-commitment .service-video-list img { aspect-ratio: 1.75; }
.service-page-mobile.service-commitment .service-video-list figure { grid-template-rows: auto 1fr; }
.service-page-mobile.service-commitment .service-articles { grid-template-columns: repeat(2,minmax(0,1fr)); }
.service-page-mobile.service-commitment .service-articles article {
  display: grid;
  grid-template-columns: 36% minmax(0,1fr);
  align-items: start;
}
.service-page-mobile.service-commitment .service-articles img {
  align-self: center;
  height: auto;
  min-height: 0;
  border-radius: .48rem;
}
.service-page-mobile.service-commitment .service-articles article > div { height: 100%; padding: .4rem .35rem; }
.service-page-mobile.service-commitment .service-articles a { align-self: start; }

/* 分离原配 */
.service-page-mobile.service-separation .service-hero { display: block; padding-top: .6em; }
.service-page-mobile.service-separation .service-hero > .service-hero-primary {
  inset: auto 0 1.4em;
  width: 100%;
  height: auto;
  aspect-ratio: 3.06;
  opacity: 1;
  mask-image: linear-gradient(#0000,#000 11%,#000 92%,#0000);
}
.service-page-mobile.service-separation .hero-words { width: 100%; padding: 0; }
.service-page-mobile.service-separation .hero-words h1 { font-size: clamp(2.25rem, 15.5vw, 10rem); }
.service-page-mobile.service-separation .hero-words ul {
  margin-top: 32%;
  padding: .42em 1%;
  background: linear-gradient(90deg,#4c0919,#810c27,#4c0919);
}
.service-page-mobile.service-separation .service-scenarios {
  grid-template-columns: 1fr;
  gap: .65rem;
  padding: 4.5% 4%;
}
.service-page-mobile.service-separation .service-scenarios h2 {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: .44em .85em;
  font-size: clamp(1.55rem, 6.6vw, 4.35rem);
  line-height: 1.12;
  border: 1px solid #ffbc88;
  border-radius: 3em;
  background: radial-gradient(ellipse,#931332,#430618);
  box-shadow: 0 0 .65rem #fa517c8f;
}
.service-page-mobile .service-scenarios ul { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: row; gap: .5rem; }
.service-page-mobile.service-separation .service-scenarios li { border-radius: .55rem; }
.service-page-mobile.service-separation .service-scenarios li:last-child { grid-column: span 2; width: calc(50% - .25rem); justify-self: center; }
.service-page-mobile.service-separation .service-scenarios img { aspect-ratio: 2.5; }
.service-page-mobile.service-separation .service-scenarios p { font-size: clamp(.92rem,3.8vw,2.3rem); }
.service-page-mobile.service-separation .service-benefits,
.service-page-mobile.service-separation .service-steps { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: row; }
.service-page-mobile.service-separation .service-benefits > li { border: 1px solid #d7846177; background: radial-gradient(ellipse,#640c23,#28030e); }
.service-page-mobile.service-separation .service-benefits > li p { font-size: clamp(.72rem,2.8vw,1.6rem); }
.service-page-mobile.service-separation .service-steps { border: 0; background: none; box-shadow: none; padding: 1% 0; }
.service-page-mobile.service-separation .service-steps > li { padding: .55em .2em; }
.service-page-mobile.service-separation .service-steps img.service-icon { width: 2.7em; height: 2.7em; }
.service-page-mobile.service-separation .service-steps > li:last-child { grid-column: 1 / -1; width: calc(50% - .25rem); justify-self: center; }
.service-page-mobile.service-separation .service-videos {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.service-page-mobile.service-separation .service-videos figure:first-child {
  grid-column: 1 / -1;
  grid-row: auto;
}
.service-page-mobile.service-separation .service-videos img { aspect-ratio: 1.48; }
.service-page-mobile.service-separation .service-videos figure:first-child img { aspect-ratio: 2.8; }
.service-page-mobile.service-separation .service-articles { grid-template-columns: 1fr; gap: .7rem; }
.service-page-mobile.service-separation .service-articles article:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  display: grid;
  grid-template-columns: 31% minmax(0,1fr);
  border-radius: .55rem 1.05rem .6rem .85rem;
  background: linear-gradient(155deg,#741b31,#310410 72%);
  color: #fff1d6;
  min-height: 8.3rem;
}
.service-page-mobile.service-separation .service-articles article:nth-child(n) h3 { color: var(--mobile-gold); }
.service-page-mobile.service-separation .service-articles article:nth-child(n) img {
  align-self: center;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid #e1a761;
}
.service-page-mobile.service-separation .service-articles article:first-child { grid-template-columns: 1fr; }
.service-page-mobile.service-separation .service-articles article:first-child img { aspect-ratio: 3.95; }
.service-page-mobile.service-separation .service-articles article > div { padding: 4.2%; }
.service-page-mobile.service-separation .service-case-number {
  position: static;
  margin-bottom: .36em;
  color: #fff2ce;
  border: 1px solid #d69f63;
  background: #9a3c23;
  border-radius: .55em;
  transform: none;
}
.service-page-mobile.service-separation .service-articles h3 {
  font-size: clamp(1rem,4.15vw,2.5rem);
}
.service-page-mobile.service-separation .service-articles p { font-size: clamp(.88rem,3.3vw,1.95rem); }
.service-page-mobile.service-separation .service-articles a { align-self: end; }
.service-page-mobile.service-separation .service-articles article:is(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(8)) {
  grid-template-columns: minmax(0,1fr) 30%;
}
.service-page-mobile.service-separation .service-articles article:is(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(8)) img { grid-column: 2; grid-row: 1; }
.service-page-mobile.service-separation .service-articles article:is(:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(8)) > div { grid-column: 1; grid-row: 1; }
.service-page-mobile.service-separation .service-articles article:is(:nth-child(3),:nth-child(8)) {
  background: linear-gradient(140deg,#fff3ca,#f3d39b);
  color: #4c0f18;
}
.service-page-mobile.service-separation .service-articles article:is(:nth-child(3),:nth-child(8)) h3 { color: #630b1c; }
.service-page-mobile.service-separation .service-articles article:is(:nth-child(3),:nth-child(8)) img {
  align-self: center;
  height: auto;
  width: 89%;
  border: .28em solid #fff7dd;
  box-shadow: 0 .2em .4em #3d0d24a1;
  transform: rotate(6deg);
}
.service-page-mobile.service-separation .service-articles article:nth-child(5) img { clip-path: polygon(50% 0, 100% 13%, 100% 75%, 50% 100%, 0 76%, 0 13%); }
.service-page-mobile.service-separation .service-articles article:nth-child(6) { border-radius: 2.6rem; }
.service-page-mobile.service-separation .service-articles article:nth-child(6) img { align-self: center; width: 92%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.service-page-mobile.service-separation .service-articles article:nth-child(7) img { border-radius: 60% 65% .2rem .2rem; }
.service-page-mobile.service-separation .service-articles article:nth-child(8) img { transform: rotate(-7deg); }

/* 拆散婚姻 */
.service-page-mobile.service-marriage .service-hero > .service-hero-primary { width: 32%; mask-image: linear-gradient(90deg, #000 84%, transparent); }
.service-page-mobile.service-marriage .service-hero > .service-hero-right { opacity: 1; width: 23%; }
.service-page-mobile.service-marriage .hero-words { width: 59%; margin-inline: auto; padding-inline: 0; }
.service-page-mobile.service-marriage .hero-words h1 { font-size: clamp(1.8rem,9.35vw,7rem); }
.service-page-mobile.service-marriage .service-qualifiers {
  grid-template-columns: 46% minmax(0,1fr);
  align-items: center;
  gap: .55rem;
  padding: 3.3%;
}
.service-page-mobile.service-marriage .service-qualifiers section { padding: .42rem; }
.service-page-mobile.service-marriage .service-qualifiers h2 { font-size: clamp(.8rem,3.05vw,2rem); }
.service-page-mobile.service-marriage .service-paper .service-checklist { font-size: clamp(.7rem,2.55vw,1.72rem); }
.service-page-mobile.service-marriage .service-scenarios p { font-size: clamp(.64rem,2.2vw,1.55rem); }
.service-page-mobile.service-marriage .service-scenarios ul { gap: .32rem; }
.service-page-mobile.service-marriage .service-steps { grid-template-columns: repeat(5,minmax(0,1fr)); grid-auto-flow: row; padding: .42rem; }
.service-page-mobile.service-marriage .service-steps h3 { font-size: clamp(.64rem,2.55vw,1.55rem); }
.service-page-mobile.service-marriage .service-steps img.service-icon { width: 2.35em; height: 2.35em; }
.service-page-mobile.service-marriage .service-media {
  grid-template-columns: 36% minmax(0,1fr);
  align-items: center;
  gap: .55rem;
}
.service-page-mobile.service-marriage .service-media-heading { padding: .45rem .3rem; }
.service-page-mobile.service-marriage .service-media-heading h2 { font-size: clamp(1rem,3.45vw,2.5rem); }
.service-page-mobile.service-marriage .service-media-heading p { font-size: clamp(.7rem,2.6vw,1.65rem); }
.service-page-mobile.service-marriage .service-videos { display: block; }
.service-page-mobile.service-marriage .service-videos img { aspect-ratio: 2.5; }
.service-page-mobile.service-marriage .service-media-status { grid-column: 2; }
.service-page-mobile.service-marriage .service-articles {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .35rem;
}
.service-page-mobile.service-marriage .service-articles article:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  border-radius: .75rem;
  background: linear-gradient(130deg,#fff3cf,#fad99c);
  color: #4f0913;
}
.service-page-mobile.service-marriage .service-articles article:nth-child(n) h3 { color: #610a16; }
.service-page-mobile.service-marriage .service-articles article:first-child {
  background: radial-gradient(ellipse at left top,#85233b,#34030e);
  color: #fff0cb;
}
.service-page-mobile.service-marriage .service-articles article:first-child h3 { color: var(--mobile-gold); }
.service-page-mobile.service-marriage .service-articles article:nth-child(n) img { aspect-ratio: 1.85; }
.service-page-mobile.service-marriage .service-articles article:nth-child(n) h3 { font-size: clamp(.77rem,2.8vw,1.85rem); margin-bottom: .35em; }
.service-page-mobile .service-ledger-inner {
  width: 100%;
  grid-template-columns: 29% minmax(0,1fr);
  gap: 2%;
  padding: .45rem;
}
.service-page-mobile .service-ledger-inner > div { grid-template-columns: 1fr; align-content: center; }
.service-page-mobile .service-ledger-inner img { width: 73%; justify-self: center; }
.service-page-mobile .service-ledger-inner p { font-size: clamp(.74rem,2.9vw,1.8rem); }
.service-page-mobile .service-ledger-inner a { font-size: clamp(.73rem,2.8vw,1.65rem); }
.service-page-mobile .service-ledger-inner a span { flex: 0 0 auto; font-size: 1.4em; line-height: 1; text-decoration: none; }

@media(max-width: 360px) {
  .service-page-mobile .service-intro { grid-template-columns: 29% minmax(0,1fr); }
  .service-page-mobile .service-intro > img { aspect-ratio: 1; }
  .service-page-mobile .service-methods ul { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .service-page-mobile .service-methods li { border-radius: .9rem; aspect-ratio: auto; }
  .service-page-mobile.service-commitment .service-articles { grid-template-columns: 1fr; gap: .5rem; }
  .service-page-mobile.service-commitment .service-video-list > div { grid-template-columns: 1fr; }
  .service-page-mobile.service-relationship .service-articles { grid-template-columns: 1fr; }
  .service-page-mobile.service-relationship .service-articles article { display: grid; grid-template-columns: 32% minmax(0,1fr); }
  .service-page-mobile.service-relationship .service-articles img { height: 100%; aspect-ratio: auto; }
  .service-page-mobile.service-marriage .service-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
