/* 서비스 소개: 기존 색상·폰트·헤더를 이어 쓰는 정적 소개 페이지. */
.services-page .header { background: var(--day-bg); border-bottom: 1px solid var(--day-line) }
.services-page .nav a[aria-current=page] { opacity: 1; text-decoration: underline; text-underline-offset: 6px }
.s-skip { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--day-ink); color: var(--day-bg); transform: translateY(-150%) }
.s-skip:focus { transform: none }
.s-hero { padding: clamp(128px, 14vw, 190px) 0 clamp(56px, 7vw, 96px) }
.s-hero-grid { display: grid; gap: 40px; align-items: center }
.s-hero-copy { display: grid; gap: 22px }
.s-hero h1 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.28 }
.s-hero .eyebrow, .s-hero .lead { margin: 0 }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px }
.s-text-link { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px }
.s-venue { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--night-bg) }
.s-venue img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 60% center }
.s-venue figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 12px; padding: 56px 28px 28px; color: #fff; background: linear-gradient(transparent, rgba(20,16,28,.86)) }
.s-label { justify-self: start; font-size: 12px; font-weight: 600; padding: 5px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px }
.s-venue figcaption > span:last-child { font-size: 16px }
.s-heading { display: grid; gap: 16px; margin-bottom: 36px }
.s-heading .eyebrow, .s-heading .lead { margin: 0 }
.s-business { padding: clamp(56px, 8vw, 100px) 0; border-top: 1px solid var(--line) }
.s-company-facts { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 0 0 32px; font-size: 14px }
.s-company-facts div { display: grid; gap: 5px }
.s-company-facts dt { color: var(--sub) }
.s-company-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; word-break: normal }
.s-company-facts a { text-decoration: underline; text-underline-offset: 4px }
.s-business-grid { display: grid; gap: 20px }
.s-business-card { padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-l); display: grid; gap: 18px; align-content: start }
.s-business-card p { color: var(--sub); margin: 0 }
.s-business-card .s-text-link { justify-self: start; margin-top: 8px }
.s-status { justify-self: start; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--sage-ink); background: var(--sage-bg) }
.s-development { background: #f1edf7; border-color: #e0d8ed }
.s-development .s-status { background: #e4dbf4; color: #51347a }
.s-automation { background: var(--bg); color: var(--ink); padding: clamp(64px, 9vw, 120px) 0 }
.s-flow { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none }
.s-flow li { padding: 28px 0 0; border-top: 1px solid var(--line); display: grid; gap: 16px; align-content: start }
.s-flow-number { font: 500 14px/1 var(--font-body); letter-spacing: .1em; color: #c4aff2 }
.s-flow p { color: var(--sub); margin: 0; font-size: 16px }
.s-note { color: var(--sub); font-size: 13px; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line) }
.s-building { padding: clamp(64px, 9vw, 120px) 0 }
.s-building-grid { display: grid; gap: 28px }
.s-building-copy { display: grid; gap: 32px }
.s-building-copy article { display: grid; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--line) }
.s-building-copy p { margin: 0; color: var(--sub) }
.s-small-label { color: #65517e; font-size: 13px; font-weight: 600 }
.s-contact { padding: clamp(60px, 8vw, 104px) 0; background: var(--sage-bg); color: var(--sage-ink) }
.s-contact .wrap { display: grid; gap: 22px; justify-items: start }
.s-contact .eyebrow, .s-contact .lead { margin: 0; color: #52624d }
.s-email { font-size: clamp(19px, 3vw, 34px); font-weight: 600; overflow-wrap: anywhere; word-break: normal; text-decoration: underline; text-underline-offset: 8px }
.services-page footer { padding-bottom: 48px }
@media (min-width: 760px) {
  .s-business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .s-flow { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (min-width: 1000px) {
  .s-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px }
  .s-building-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px }
}
@media (max-width: 999px) { .s-venue img { aspect-ratio: 16/10 } }