/* ============================================================
   service.css — Service Detail 頁共用模板（6 服務共用）
   依賴：global.css（.breadcrumb / .final-cta / buttons / type tokens）
   區塊：.svc-hero（navy 照片帶：label + 大標 + 右欄內文 + note）
         /.svc-cards（sub-service 大卡 ×2）
   各頁差異：--hero-bg（inline style）、文案、卡片圖
   ※ 背景圖不在本檔！由各頁 HTML 的 <section style="--hero-bg: url(...)">
     帶入（搜尋 hero-bg 即可找到）；圖檔放 assets/img/bg/
   ============================================================ */

/* 整頁背景 — 照片固定 backdrop（掛在 <main class="svc-bg">，scope 給 water-heater；
   drain 用 sd-hero 不受影響）*/
.svc-bg {
  background-color: var(--color-navy, #262A71);        /* fallback */
  background-image: url('../img/bg/bg-water-heater.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.svc-hero {
  position: relative;
  margin-top: 4.625rem;
  padding: 4.5rem 1.5rem 3rem;
  color: var(--color-white, #fff);
  overflow: hidden;
}

.svc-hero__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);           /* 內頁固定 1366 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.svc-hero__label {
  display: block;
  margin: 0 0 0.5rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
}
.svc-hero__title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(3.25rem, 13vw, 9.375rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-yellow, #F0BC29);
}
/* 手機：兩行「Water Heater / Services」——隱藏第一個 <br>、保留第二個；桌機照 <br> 直排三行 */
@media (max-width: 767.98px) {
  .svc-hero__title-br { display: none; }
  .svc-hero__title-br:last-of-type { display: inline; }
  .svc-hero__title { font-size: clamp(3rem, 14.5vw, 4.5rem); }
}

.svc-hero__sub {
  margin: 0 0 1.25rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  line-height: 1.2;
  color: var(--color-white, #fff);
}
.svc-hero__desc p { margin: 0 0 1.25rem; }
.svc-hero__desc p:last-child { margin-bottom: 0; }

.svc-note {
  position: relative;
  margin-top: 1.5rem;
  padding-left: 1.5rem;
  border-left: 0.375rem solid var(--color-yellow, #F0BC29);
}
.svc-note__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  line-height: 1.2;
}
.svc-note__text {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-white, #fff);
  max-width: 33.5rem;
}
/* mascot：working.svg 以 CSS mask 轉純黃剪影，高度貼齊 note 文字塊 */
.svc-note__mascot {
  display: none;
  width: 10rem;
  aspect-ratio: 271 / 272;                             /* working.svg 原始比例（完整版）*/
  background-color: var(--color-yellow, #F0BC29);
  -webkit-mask: url('../img/mascot/working.svg') center / contain no-repeat;
          mask: url('../img/mascot/working.svg') center / contain no-repeat;
}
.svc-hero__mascot {
  display: none;
  width: 5rem;
  aspect-ratio: 271 / 272;
  background-color: var(--color-yellow, #F0BC29);
  -webkit-mask: url('../img/mascot/working.svg') center / contain no-repeat;
          mask: url('../img/mascot/working.svg') center / contain no-repeat;
}

@media (max-width: 767.98px) {
  .svc-hero__sub { margin-bottom: 1rem; }
  .svc-note { margin-top: 2rem; }
  .svc-hero__head { position: relative; }
  .svc-hero__mascot {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;                                         /* 對齊 Services 行 */
  }
}

.svc-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.svc-card {
  position: relative;
  display: block;
  aspect-ratio: 668 / 468;                             /* Figma 卡片比例 */
  border-radius: 1.25rem;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
}
.svc-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: center / cover no-repeat #2a2a2a;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-card__bg { transform: scale(1.04); }
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%);
}
.svc-card__caption {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.25rem;
  z-index: 1;
}
.svc-card__title {
  margin: 0 0 0.375rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-white, #fff);
}
.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.05625rem;
  color: var(--color-yellow, #F0BC29);
  transition: gap .35s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-card__more { gap: 0.75rem; }
.svc-card__arrow { display: none; }

@media (max-width: 767.98px) {
  .svc-hero__head  { order: 1; }
  .svc-cards       { order: 2; grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; margin-top: 0.5rem; }
  .svc-hero__aside { order: 3; }

  .svc-card {
    aspect-ratio: auto;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .svc-card::after { display: none; }
  .svc-card__bg {
    position: static;
    aspect-ratio: 4 / 3;
    border-radius: 1.25rem;
  }
  .svc-card:hover .svc-card__bg { transform: none; }
  .svc-card__caption {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.125rem;
  }
  .svc-card__title { margin: 0; font-size: 1.125rem; }
  .svc-card__more  { display: none; }
  .svc-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-yellow, #F0BC29);
    color: var(--color-navy, #262A71);
  }
  .svc-card__arrow svg { width: 1rem; height: 1rem; }
}

@media (min-width: 768px) {
  .svc-hero { padding: 6rem 2.5rem 3.5rem; }
  .svc-cards { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .svc-hero { padding: 6.5rem 3rem 4rem; }
  .svc-hero__inner {
    /* 上方比例：標題 41% / 內文 59%（Figma 566:800）；
       下方卡片有自己的 1fr 1fr，不受此比例影響 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
    column-gap: 4rem;
    align-items: start;
  }
  .svc-hero__head  { grid-column: 1; }
  .svc-hero__aside { grid-column: 2; margin-top: 0.5rem; }
  .svc-cards       { grid-column: 1 / -1; gap: 1.875rem; }

  /* note：文字 + mascot 並排；mascot 靠底 → svg 內建的裁切邊貼齊區塊下緣，視覺像坐在底線上 */
  .svc-note { display: flex; align-items: flex-start; gap: 2rem; }
  .svc-note__mascot { display: block; flex-shrink: 0; align-self: flex-end; }
}

/* ============================================================
   ≥1280 — 對齊 1366 欄
   ============================================================ */
@media (min-width: 1280px) {
  .svc-hero {
    margin-top: 6.25rem;
    padding-left:  var(--edge-pad);
    padding-right: var(--edge-pad);
  }
  .svc-hero .breadcrumb {
    padding-left:  var(--edge-pad);
    padding-right: var(--edge-pad);
  }
}

.sd-hero {
  position: relative;
  margin-top: 4.625rem;
  min-height: 0;
  padding: 5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-white, #fff);
  isolation: isolate;
  overflow: hidden;
}
/* 手機：照片固定 4:3（75vw），label+title 釘照片下緣 */
@media (max-width: 767.98px) {
  .sd-hero { min-height: 75vw; }
}
.sd-hero {
  background-color: var(--color-navy, #262A71);
  background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), var(--hero-bg);
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sd-hero__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
}
.sd-hero__cta { display: none; }
@media (min-width: 1024px) {
  .sd-hero__cta {
    display: inline-flex;
    position: absolute;
    left: calc(3rem + (100% - 6rem) * 0.75);
    transform: translateX(-50%);
    bottom: 3rem;
    z-index: 2;
  }
}
@media (min-width: 1280px) {
  .sd-hero__cta { left: calc(var(--edge-pad) + (100% - 2 * var(--edge-pad)) * 0.75); }
}
.sd-hero__label {
  display: block;
  margin: 0 0 0.25rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  color: var(--color-white, #fff);
}
.sd-hero__title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-white, #fff);
  text-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, .45);
}

.sd-main {
  background: var(--color-navy, #262A71);
  color: var(--color-white, #fff);
  padding: 0 1.5rem 2.5rem;
}
.sd-main__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

.sd-panel {
  background: var(--color-navy, #262A71);
  padding: 2.5rem 0 1rem;
}
.sd-panel__lead {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 0.375rem solid var(--color-yellow, #F0BC29);
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1.2;
  color: var(--color-white, #fff);
}
.sd-panel__desc p { margin: 0 0 1.25rem; }
.sd-panel__desc p:last-child { margin-bottom: 0; }

.sd-panel__listtitle {
  margin: 3rem 0 1rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  line-height: 1.2;
  color: var(--color-yellow, #F0BC29);
}
.sd-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.sd-list li {
  position: relative;
  padding-left: 1.75rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.05625rem;
  line-height: 1.4;
}
@media (max-width: 767.98px) {
  .sd-panel__listtitle { margin-top: 3rem; }   /* 手機版縮短上距（桌機維持 9rem）*/
  .sd-list li { font-size: 1rem; }
}
.sd-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 0.875rem;
  aspect-ratio: 100 / 118;                             /* lemon.svg 原始比例 */
  background: url('../img/icon/lemon.svg') center / contain no-repeat;
}

.sd-aside {
  padding: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.sd-aside__photo {
  width: 100%;
  aspect-ratio: 668 / 388;
  border-radius: 1.25rem;
  overflow: hidden;
}
.sd-aside__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sd-precision__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  line-height: 1.2;
  color: var(--color-white, #fff);
}
.sd-precision__text { color: var(--color-white, #fff); }
.sd-precision {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sd-precision__mascot {
  align-self: flex-end;
  flex-shrink: 0;
  width: 11rem;
  aspect-ratio: 230 / 147;
  background-color: var(--color-white, #fff);
  -webkit-mask: url('../img/mascot/thumbsup.svg') center / contain no-repeat;
          mask: url('../img/mascot/thumbsup.svg') center / contain no-repeat;
  margin-bottom: -2.5rem;                              /* 抵銷 sd-main padding-bottom → 貼齊白色區 */
}
@media (min-width: 768px) {
  .sd-precision__mascot { margin-bottom: -3rem; }
}
@media (min-width: 1024px) {
  .sd-precision__mascot { width: 14.375rem; margin-bottom: -6rem; }
}

.sd-strip {
  background: var(--color-white, #fff);
  padding: 2.5rem 1.5rem;
}
.sd-strip__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}
@media (max-width: 767.98px) {
  .sd-strip__inner {
    display: flex;
    gap: 0.625rem;
    width: 100vw;                       /* 真正滿版：避免 border-box 下右側少 48px、左右不對稱 */
    margin: 0 calc(50% - 50vw);
    padding: 0 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sd-strip__inner::-webkit-scrollbar { display: none; }
  .sd-strip__item {
    flex: 0 0 auto;
    height: 14rem;
    aspect-ratio: auto;                                /* 取消固定比例 → 不裁切 */
    scroll-snap-align: start;
  }
  .sd-strip__item img {
    width: auto;
    height: 100%;                                      /* 圖片原始比例完整顯示 */
  }
}
.sd-strip__item {
  border-radius: 1.25rem;
  overflow: hidden;
}
/* 三種比例（Figma 同高 409：橫 622 / 直 283 / 方 440）*/
.sd-strip__item--landscape { aspect-ratio: 622 / 409; }
.sd-strip__item--portrait  { aspect-ratio: 283 / 409; }
.sd-strip__item--square    { aspect-ratio: 440 / 409; }
.sd-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sd-features {
  background: var(--color-white, #fff);
  padding: 1.5rem 1.5rem 3rem;
}
.sd-features__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}
.sd-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.625rem;
}
.sd-feature__badge {
  position: relative;
  width: 4.5rem;
  aspect-ratio: 100 / 118;                             /* lemon.svg 比例 */
}
@media (max-width: 767.98px) {
  .sd-feature__badge { width: 5.5rem; }                /* 手機版放大檸檬徽章（平板維持 4.5rem）*/
}
.sd-feature__badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-yellow, #F0BC29);
  -webkit-mask: url('../img/icon/lemon.svg') center / contain no-repeat;
          mask: url('../img/icon/lemon.svg') center / contain no-repeat;
}
.sd-feature__badge::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: var(--color-navy, #262A71);
  -webkit-mask: var(--fi) center / contain no-repeat;
          mask: var(--fi) center / contain no-repeat;
}
.sd-feature__text {
  margin: 0;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--color-navy, #262A71);
}

@media (min-width: 768px) {
  .sd-hero { min-height: 32rem; padding: 6rem 2.5rem 2.5rem; }
  .sd-main { padding: 0 2.5rem 3rem; }
  .sd-panel { padding: 3rem 2.5rem; margin: 0 -2.5rem; }
  .sd-strip__inner { grid-template-columns: 622fr 283fr 440fr; }   /* 欄寬比 = 圖片比，三張同高 */
  .sd-features__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .sd-hero {
    min-height: clamp(49.375rem, 70svh, 75rem);        /* = contact hero 高度 */
    padding: 6.5rem 3rem 3rem;
    justify-content: flex-start;
  }
  .sd-hero__inner { margin-top: 5%; }
  .sd-main { padding: 0 3rem 6rem; }
  .sd-panel {
    margin: -25rem -3.625rem 0 -3rem;
    padding: 5rem 3.625rem 1rem 3rem;
    position: relative;
    z-index: 2;
  }
  .sd-precision {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
    gap: 3rem;
    margin-top: 2.5rem;
  }
  .sd-precision__body { flex: 1; }
  .sd-main__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.19fr);
    column-gap: 4.5rem;
    align-items: start;
  }
  .sd-aside { padding-top: 7rem; gap: 2rem; }
  .sd-feature__badge { width: 6.875rem; }
  .sd-feature__text { font-size: 1.5625rem; }
}

/* ============ sd-* ≥1280 — 對齊 1366 欄 ============ */
@media (min-width: 1280px) {
  .sd-hero {
    margin-top: 6.25rem;
    padding-left:  var(--edge-pad);
    padding-right: var(--edge-pad);
  }
  .sd-hero .breadcrumb {
    padding-left:  var(--edge-pad);
    padding-right: var(--edge-pad);
  }
  .sd-main  { padding-left: var(--edge-pad); padding-right: var(--edge-pad); }
  .sd-panel {
    margin-left: calc(-1 * var(--edge-pad));
    padding-left: var(--edge-pad);
  }
  .sd-strip,
  .sd-features { padding-left: var(--edge-pad); padding-right: var(--edge-pad); }
}

.svc-showcase {
  position: relative;
  margin-top: 4.625rem;
  padding: 3rem 1.5rem 4rem;
  color: var(--color-navy, #262A71);
  background: var(--color-yellow, #F0BC29);
  overflow: hidden;
}
.svc-showcase__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
}
.svc-showcase__head { margin: 0 0 2rem; }
.svc-showcase .breadcrumb {
  position: static;
  margin: 0 0 1rem;
  padding: 0;
  color: var(--color-navy, #262A71);
}
.svc-showcase .breadcrumb a:hover { color: var(--color-yellow-dark, #D4A017); }
.svc-showcase .breadcrumb__current { color: var(--color-navy, #262A71); font-weight: 700; }
.svc-showcase__accent {
  display: block;
  width: 3rem;
  height: 0.1875rem;
  background: var(--color-navy, #262A71);
  margin: 0 0 1.25rem;
}
.svc-showcase__title { margin: 0 0 0.75rem; color: var(--color-navy, #262A71); }
.svc-showcase__intro { max-width: 48rem; color: var(--color-text-body, #333); }

.svc-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.svc-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
  isolation: isolate;
}
.svc-tile .service-card__bg {
  z-index: 0;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.svc-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%);
}
.svc-tile:hover .service-card__bg { transform: scale(1.06); }
.svc-tile__title {
  position: relative;
  z-index: 2;
  padding: 1.25rem 1rem;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-white, #fff);
  text-align: center;
}

@media (min-width: 768px) {
  .svc-showcase { padding: 4rem 2.5rem 5rem; }
  .svc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .svc-tile__title { font-size: 1.5rem; padding-bottom: 1.5rem; }
}
@media (min-width: 1024px) {
  .svc-showcase { padding: 5rem 3rem 6rem; }
  .svc-showcase__head { margin-bottom: 3rem; }
  .svc-tiles { gap: 1.25rem; }
  .svc-tile__title { font-size: 1.75rem; padding-bottom: 1.75rem; }
}
@media (min-width: 1280px) {
  .svc-showcase { margin-top: 6.25rem; padding-left: var(--edge-pad); padding-right: var(--edge-pad); }
}

/* ============================================================
   Related Services — 底部「其他服務」橫向連結（compact:小圖 + 標題）
   ============================================================ */
.related-services { background: var(--color-bg-light, #F5F5F5); padding: 3rem 1.5rem; }
.related-services__inner { width: 100%; max-width: var(--content-max, 85.3125rem); margin: 0 auto; }
.related-services__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  line-height: 1.2;
  color: var(--color-navy, #262A71);
}
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.related-card {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  border-radius: 0.875rem;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.related-card__bg {
  position: absolute; inset: 0; z-index: -1;
  background: center / cover no-repeat #2a2a2a;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.related-card:hover .related-card__bg { transform: scale(1.05); }
.related-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
}
.related-card__title {
  position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.75rem; z-index: 1;
  font-family: var(--font-cta, sans-serif);
  font-weight: 800; font-size: 1.125rem; line-height: 1.15;
  color: var(--color-white, #fff);
}
@media (min-width: 768px) {
  .related-services { padding: 3.5rem 2.5rem; }
  .related-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .related-card__title { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .related-services { padding: 4rem 3rem; }
  .related-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1280px) {
  .related-services { padding-left: var(--edge-pad); padding-right: var(--edge-pad); }
}