/* Presentation scoped to the overview; service copy and audio sources are unchanged. */
#content:has(#sc-services) { padding: 0 5%; margin-top: 34px; }
#sc-services { max-width: 1180px; margin: 0 auto; color: #332a30; font-size: 15px; line-height: 1.75; }
#sc-services * { box-sizing: border-box; }
#sc-services .sc-services-intro { max-width: 850px; margin-bottom: 24px; }
#sc-services .sc-services-eyebrow { color: #911455; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
#sc-services h1 { margin: 8px 0 12px; color: #332a30; font-size: clamp(28px,3vw,38px); line-height: 1.2; letter-spacing: -.03em; font-weight: 700; }
#sc-services .sc-services-intro p { margin: 0; color: #776c73; font-size: 16px; }
#sc-services .sc-services-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
#sc-services .sc-services-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 14px; border: 1px solid #e5d7df; border-radius: 24px; background: #fff; color: #77405c; text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1.4; }
#sc-services .sc-services-nav a:hover { background: #fbf1f6; border-color: #bb7d9e; }
#sc-services .sc-services-list { display: grid; gap: 22px; }
#sc-services .sc-service-card { --accent: #911455; --tint: #fbf1f6; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 32px; align-items: start; margin: 0; padding: 28px; border: 1px solid #e7dfe4; border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(48,31,41,.04); scroll-margin-top: 24px; }
#sc-services .sc-service-card[data-service-type="0"], #sc-services .sc-service-card[data-service-type="2"] { --accent: #985d00; --tint: #fff6e5; }
#sc-services .sc-service-description, #sc-services .sc-service-samples { min-width: 0; }
#sc-services .sc-service-description h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: #332a30; font-size: 22px; line-height: 1.3; font-weight: 600; }
#sc-services .sc-service-icon { display: inline-grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: var(--tint); color: var(--accent); }
#sc-services .sc-service-icon svg { width: 25px; height: 25px; }
#sc-services .sc-service-description p { margin: 0 0 15px; color: #665b63; line-height: 1.8; text-align: left; }
#sc-services .sc-service-description p:last-child { margin-bottom: 0; }
#sc-services .sc-service-samples { padding: 18px; border: 1px solid #eee6eb; border-radius: 13px; background: #faf8f9; }
#sc-services .sc-service-samples h3 { margin: 0 0 12px; color: #6b5d66; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
#sc-services .sc-service-audios { display: grid; gap: 8px; margin: 0 0 15px; padding: 0; list-style: none; }
#sc-services .sc-service-audios li { min-width: 0; margin: 0; padding: 0; }
#sc-services .sc-service-listen { display: flex; align-items: center; gap: 10px; min-height: 48px; width: 100%; padding: 10px 12px; border: 1px solid #e6d8e0; border-radius: 9px; background: #fff; color: #44333e; font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; }
#sc-services .sc-service-listen img.control { width: 25px; height: 25px; margin: 0; flex: 0 0 25px; vertical-align: middle; }
#sc-services .sc-service-demo-title { min-width: 0; flex: 1; overflow-wrap: anywhere; }
#sc-services .sc-service-demo-number { margin-left: auto; color: #8b7883; font-size: 10px; font-variant-numeric: tabular-nums; }
#sc-services .sc-service-listen:hover { border-color: #b56d91; background: #fdf7fa; }
#sc-services .sc-service-listen.is-playing { border-color: #911455; background: #fbf1f6; color: #911455; }
#sc-services .sc-service-more { margin: 4px 0 13px; }
#sc-services .sc-service-more .button { display: block; margin: 0; padding: 0; border: 0; background: transparent; color: #911455; font-size: 12px; font-weight: 500; line-height: 1.6; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
#sc-services .sc-service-samples > .button { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 46px; margin: 0; padding: 10px 15px; border: 1px solid #911455; border-radius: 9px; background: #911455; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; }
#sc-services .sc-service-samples > .button:hover { background: #741044; }
#sc-services a:focus-visible, #sc-services button:focus-visible { outline: 3px solid #911455; outline-offset: 3px; }
#sc-services .sc-service-card:target { border-color: #bc83a1; }
@media (max-width: 1000px) {
  #sc-services .sc-service-card { gap: 22px; padding: 22px; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  #sc-services .sc-service-description h2 { font-size: 20px; }
}
@media (max-width: 760px) {
  #sc-services .sc-service-card { grid-template-columns: minmax(0,1fr); }
  #sc-services .sc-service-samples { padding: 16px; }
  #sc-services .sc-services-nav { gap: 7px; margin-bottom: 22px; }
  #sc-services .sc-services-nav a { padding: 8px 12px; font-size: 12px; }
  #sc-services .sc-services-intro p { font-size: 14px; }
}
@media (max-width: 400px) {
  #sc-services .sc-service-card { padding: 17px; border-radius: 14px; }
  #sc-services .sc-service-description h2 { gap: 11px; font-size: 19px; }
  #sc-services .sc-service-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; }
}
