/* =============================================
   THEALTH Service Detail Pages Stylesheet
   ============================================= */

/* =============================================
   SERVICE PAGE HERO (Sub-page hero)
   ============================================= */
.service-hero {
  position: relative;
  padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
  background: linear-gradient(160deg, #FAFAF6 0%, #EDF7F0 40%, #F0EDE6 100%);
  overflow: hidden;
}

.service-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(46, 166, 123, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.service-hero-inner {
  position: relative;
  z-index: 1;
}

.service-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.service-hero-breadcrumb a {
  color: var(--color-primary);
  transition: opacity var(--transition-fast);
}

.service-hero-breadcrumb a:hover {
  opacity: 0.7;
}

.service-hero-breadcrumb .separator {
  color: var(--color-text-muted);
}

.service-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(46, 166, 123, 0.1);
  border: 1px solid rgba(46, 166, 123, 0.2);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.service-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.service-hero-title .highlight {
  color: var(--color-primary);
}

.service-hero-desc {
  font-size: 1.05rem;
  color: var(--color-text-light);
  line-height: 1.8;
  max-width: 680px;
}

/* =============================================
   FREE BANNER
   ============================================= */
.free-banner {
  background: linear-gradient(135deg, var(--color-accent) 0%, #D47520 100%);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-lg) 0;
  position: relative;
  overflow: hidden;
}

.free-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.free-banner-inner {
  position: relative;
  z-index: 1;
}

.free-banner-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  animation: pulse 2s infinite;
}

.free-banner-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.free-banner-sub {
  font-size: 1rem;
  opacity: 0.9;
}

.free-banner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: var(--space-md);
}

.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.2rem;
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* =============================================
   SERVICE FEATURES
   ============================================= */
.svc-features {
  background: var(--color-bg);
}

.svc-features-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.svc-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.svc-feature-card {
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  overflow: hidden;
}

.svc-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* 背景グラフィック（疑似要素） */
.svc-feature-card::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 10rem;
  height: 10rem;
  opacity: 0.18;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.svc-feature-card:hover::after {
  transform: scale(1.05) rotate(-5deg);
  opacity: 0.28;
}

.svc-feature-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.svc-feature-desc {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.8;
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 260px;
  margin: 0 auto;
}

/* ======= 各サービスページ固有のSVGアイコン ======= */

/* 施設入居サポート */
.svc-feat-money::after { background-image: url("/assets/images/icons/G.png"); }
.svc-feat-car::after { background-image: url("/assets/images/icons/O.png"); }
.svc-feat-satellite::after { background-image: url("/assets/images/icons/P.png"); }

/* 資金計画 */
.svc-feat-search::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); }
.svc-feat-calendar::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); }
.svc-feat-handshake::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E"); }

/* エンディングノート */
.svc-feat-pen::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'%3E%3C/path%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'%3E%3C/path%3E%3C/svg%3E"); }
.svc-feat-hospital::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); }

/* 遺言書 */
.svc-feat-scales::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='5' y1='7' x2='19' y2='7'%3E%3C/line%3E%3Cpath d='M5 7v10a7 7 0 0 0 14 0V7'%3E%3C/path%3E%3C/svg%3E"); }
.svc-feat-building::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'%3E%3C/rect%3E%3Cpath d='M12 2L4 6h16z'%3E%3C/path%3E%3Cline x1='8' y1='14' x2='8' y2='17'%3E%3C/line%3E%3Cline x1='12' y1='14' x2='12' y2='17'%3E%3C/line%3E%3Cline x1='16' y1='14' x2='16' y2='17'%3E%3C/line%3E%3C/svg%3E"); }
.svc-feat-talk::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E"); }

/* 相続登記 */
.svc-feat-clipboard::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E"); }
.svc-feat-home::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); }

/* 不動産トラブル */
.svc-feat-map::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'%3E%3C/polygon%3E%3Cline x1='8' y1='2' x2='8' y2='18'%3E%3C/line%3E%3Cline x1='16' y1='6' x2='16' y2='22'%3E%3C/line%3E%3C/svg%3E"); }
.svc-feat-office::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='9' y1='6' x2='9' y2='6'%3E%3C/line%3E%3Cline x1='15' y1='6' x2='15' y2='6'%3E%3C/line%3E%3Cline x1='9' y1='10' x2='9' y2='10'%3E%3C/line%3E%3Cline x1='15' y1='10' x2='15' y2='10'%3E%3C/line%3E%3Cline x1='9' y1='14' x2='9' y2='14'%3E%3C/line%3E%3Cline x1='15' y1='14' x2='15' y2='14'%3E%3C/line%3E%3C/svg%3E"); }

/* 居宅療養管理指導 */
.svc-feat-pill::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E"); }
.svc-feat-thermo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z'%3E%3C/path%3E%3C/svg%3E"); }

/* 脳の健康維持サポート */
.svc-feat-chart::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'%3E%3C/line%3E%3Cline x1='12' y1='20' x2='12' y2='4'%3E%3C/line%3E%3Cline x1='6' y1='20' x2='6' y2='14'%3E%3C/line%3E%3C/svg%3E"); }
.svc-feat-brain::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96-.44 2.5 2.5 0 0 1 0-3.12 3 3 0 0 1 0-3.88 2.5 2.5 0 0 1 0-3.12A2.5 2.5 0 0 1 9.5 2z'%3E%3C/path%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96-.44 2.5 2.5 0 0 0 0-3.12 3 3 0 0 0 0-3.88 2.5 2.5 0 0 0 0-3.12A2.5 2.5 0 0 0 14.5 2z'%3E%3C/path%3E%3C/svg%3E"); }
.svc-feat-exercise::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'%3E%3C/polyline%3E%3C/svg%3E"); }
.svc-feat-sleep::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3E%3C/path%3E%3C/svg%3E"); }
.svc-feat-food::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8h1a4 4 0 0 1 0 8h-1'%3E%3C/path%3E%3Cpath d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'%3E%3C/path%3E%3Cline x1='6' y1='1' x2='6' y2='4'%3E%3C/line%3E%3Cline x1='10' y1='1' x2='10' y2='4'%3E%3C/line%3E%3Cline x1='14' y1='1' x2='14' y2='4'%3E%3C/line%3E%3C/svg%3E"); }
.svc-feat-seedling::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea67b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E"); }

/* 資金計画・資産整理 */
.svc-feat-t::after { background-image: url("/assets/images/icons/T.png"); }
.svc-feat-u::after { background-image: url("/assets/images/icons/U.png"); }
.svc-feat-l::after { background-image: url("/assets/images/icons/L.png"); }

/* 新規追加されたサービスアイコン */
.svc-feat-h::after { background-image: url("/assets/images/icons/H.png"); }
.svc-feat-w::after { background-image: url("/assets/images/icons/W.png"); }
.svc-feat-i::after { background-image: url("/assets/images/icons/I.png"); }
.svc-feat-x::after { background-image: url("/assets/images/icons/X.png"); }
.svc-feat-y::after { background-image: url("/assets/images/icons/Y.png"); }
.svc-feat-z::after { background-image: url("/assets/images/icons/Z.png"); }
.svc-feat-aa::after { background-image: url("/assets/images/icons/AA.png"); }
.svc-feat-ab::after { background-image: url("/assets/images/icons/AB.png"); }
.svc-feat-ac::after { background-image: url("/assets/images/icons/AC.png"); }
.svc-feat-c::after { background-image: url("/assets/images/icons/C.png"); }
.svc-feat-ad::after { background-image: url("/assets/images/icons/AD.png"); }
.svc-feat-ae::after { background-image: url("/assets/images/icons/AE.png"); }
.svc-feat-af::after { background-image: url("/assets/images/icons/AF.png"); }
.svc-feat-ag::after { background-image: url("/assets/images/icons/AG.png"); }
.svc-feat-ah::after { background-image: url("/assets/images/icons/AH.png"); }
.svc-feat-ai::after { background-image: url("/assets/images/icons/AI.png"); }

/* =============================================
   FACILITY TYPES COMPARISON
   ============================================= */
.facility-types {
  background: var(--color-bg-alt);
}

.facility-types-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.facility-types-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

/* Facility table wrapper for horizontal scrolling */
.facility-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-md);
}

.facility-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: 0.88rem;
}

.facility-table thead th {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  padding: 1rem 0.75rem;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.facility-table thead th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
  text-align: left;
  padding-left: 1.25rem;
  min-width: 160px;
}

.facility-table thead th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

.facility-table tbody tr {
  border-bottom: 1px solid rgba(60, 50, 40, 0.06);
  transition: background var(--transition-fast);
}

.facility-table tbody tr:hover {
  background: rgba(46, 166, 123, 0.03);
}

.facility-table tbody tr:last-child {
  border-bottom: none;
}

.facility-table tbody td {
  padding: 1rem 0.75rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.6;
}

.facility-table tbody td:first-child {
  text-align: left;
  padding-left: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

.facility-name {
  display: block;
  font-weight: 700;
  color: var(--color-text);
}

.facility-name-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.badge-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  background: rgba(46, 166, 123, 0.1);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-limited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  background: rgba(232, 135, 43, 0.1);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  background: rgba(60, 50, 40, 0.06);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.facility-scroll-hint {
  display: none;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  .facility-scroll-hint {
    display: block;
  }
}

/* Facility type note */
.facility-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(46, 166, 123, 0.05);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-lg);
}

.facility-note-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.facility-note-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.facility-note-text {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

.facility-note-text strong {
  color: var(--color-primary);
}

/* =============================================
   SERVICE FLOW (Detailed)
   ============================================= */
.svc-flow {
  background: var(--color-bg);
}

.svc-flow-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.svc-flow-steps {
  max-width: 800px;
  margin: 0 auto;
}

.svc-flow-step {
  display: flex;
  gap: var(--space-md);
  position: relative;
}

.svc-flow-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.svc-flow-step-dot {
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 4px 12px rgba(46, 166, 123, 0.3);
  position: relative;
  z-index: 1;
}

.svc-flow-step-dot .step-prefix {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.9;
  line-height: 1;
  margin-top: 1px;
}

.svc-flow-step-dot .step-num {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
}

.svc-flow-step-line {
  width: 3px;
  flex: 1;
  background: linear-gradient(to bottom, var(--color-primary), rgba(46, 166, 123, 0.15));
  min-height: 30px;
  border-radius: 2px;
}

.svc-flow-step:last-child .svc-flow-step-line {
  display: none;
}

.svc-flow-step-body {
  padding-bottom: var(--space-xl);
  flex: 1;
}

.svc-flow-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.svc-flow-step-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.svc-flow-step-desc {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

.svc-flow-step-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding: 0.3rem 0.8rem;
  background: rgba(232, 135, 43, 0.1);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

/* =============================================
   SERVICE CTA
   ============================================= */
.svc-cta {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.svc-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.svc-cta-inner {
  position: relative;
  z-index: 1;
}

.svc-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.svc-cta-desc {
  font-size: 1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  line-height: 1.8;
  text-align: left;
}

.svc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.svc-cta .btn-white {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.svc-cta .btn-white:hover {
  background: #F0F0F0;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

.svc-cta .btn-line {
  border: 1px solid rgba(255,255,255,0.3);
}

/* =============================================
   BACK TO HOME LINK
   ============================================= */
.back-home {
  text-align: center;
  padding: var(--space-lg) 0;
  background: var(--color-bg);
}

.back-home a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-primary);
  transition: gap var(--transition-fast), opacity var(--transition-fast);
}

.back-home a:hover {
  gap: 0.75rem;
  opacity: 0.8;
}

/* =============================================
   RESPONSIVE FOR SERVICE PAGES
   ============================================= */
@media (max-width: 480px) {
  .svc-features-grid {
    grid-template-columns: 1fr;
  }

  .free-banner-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    max-width: 290px;
    margin: var(--space-md) auto 0;
  }

  .free-badge {
    justify-content: center;
    font-size: 0.8rem;
    padding: 0.5rem 0.4rem;
  }

  .svc-cta-actions .btn {
    width: 100%;
  }
}

/* =============================================
   ARCHIVE LAYOUT (Caregivers list with Sidebar)
   ============================================= */
.archive-layout {
  display: flex;
  flex-direction: row-reverse;
  gap: 2.5rem;
  align-items: flex-start;
}

.archive-main {
  flex: 1;
  min-width: 0;
}

.archive-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.sidebar-inner {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid rgba(46,166,123,0.1);
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
  color: #555;
}

.filter-label:hover {
  background: rgba(46, 166, 123, 0.05);
  color: var(--color-primary);
}

.filter-label.active {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

.filter-label input[type="radio"] {
  display: none;
}

/* Hide animations for filtered items */
.filter-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 900px) {
  .archive-layout {
    flex-direction: column;
  }
  .archive-sidebar {
    width: 100%;
    position: static;
  }
  .filter-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .filter-label {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
  }
  .filter-label.active {
    border-color: var(--color-primary);
  }
}

/* Force 3 columns in the main archive area on desktop */
.archive-main .article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1200px) {
  .archive-main .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .archive-main .article-grid {
    grid-template-columns: 1fr;
  }
  .facility-types-intro {
    text-align: left;
  }
}