/* Health directory pages (/health ...): the shared pincode-page look with a calm teal accent. */
.hd .hd-head { background: linear-gradient(135deg, #0b2239 0%, #0c4a5e 60%, #0a8f9b 130%); color: #fff; border: 0; }
.hd .hd-head h1, .hd .hd-head .pc-eyebrow, .hd .hd-head .pc-where { color: #fff; }
.hd .hd-head .pc-eyebrow { opacity: .9; }
.hd .hd-head .pc-stats li { color: rgba(255, 255, 255, .92); }
.hd .hd-head .pc-stats strong { color: #fff; }
.hd .hd-lead { margin: .9rem 0 0; max-width: 62rem; line-height: 1.65; color: rgba(255, 255, 255, .92); }
.hd .hd-order { color: #5a6b80; font-size: .9rem; margin: -.2rem 0 1rem; }
.hd .hd-avatar { background: linear-gradient(135deg, #12b5a6, #0a8f9b) !important; color: #fff; font-weight: 800; }
.hd .hd-chip { display: inline-flex; align-items: center; gap: .25rem; background: #e4f6f7; color: #076d77; border-radius: 999px; padding: .1rem .55rem; font-size: .76rem; font-weight: 700; }
.hd .pc-chips a:hover { border-color: #0a8f9b; color: #076d77; }
.hd-faq details { border: 1px solid #e3ebf3; border-radius: 14px; padding: .85rem 1.1rem; margin-bottom: .6rem; background: #fff; }
.hd-faq details[open] { background: #f3f8fa; }
.hd-faq summary { font-weight: 700; cursor: pointer; }
.hd-faq p { margin: .6rem 0 0; color: #5a6b80; line-height: 1.6; }
.hd-note { margin: 1rem 0 0; padding: .65rem .85rem; border-radius: 12px; background: #fff6f4; border: 1px solid #fbd9d2; color: #8a2d1d; font-size: .88rem; }
.hd-note i { margin-right: .35rem; }
.hd .hd-head h1 .pc-where { display: inline; font-weight: 600; opacity: .92; }

/* ---------- hub and kind pages ---------- */
.hd .hd-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 2.2rem 2.2rem 1.6rem; color: #fff; background: linear-gradient(135deg, #0b2239 0%, #0c4a5e 58%, #0a8f9b 130%); box-shadow: 0 18px 40px rgba(11, 34, 57, .18); margin-bottom: 1.6rem; }
.hd .hd-hero-bg span { position: absolute; border-radius: 50%; opacity: .55; pointer-events: none; }
.hd .hd-hero-bg span:nth-child(1) { width: 380px; height: 380px; right: -110px; top: -150px; background: radial-gradient(circle, rgba(22, 184, 164, .55), rgba(22, 184, 164, 0) 70%); }
.hd .hd-hero-bg span:nth-child(2) { width: 260px; height: 260px; left: -80px; bottom: -120px; background: radial-gradient(circle, rgba(56, 189, 248, .35), rgba(56, 189, 248, 0) 70%); }
.hd .hd-eyebrow { position: relative; margin: 0 0 .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.hd .hd-hero h1 { position: relative; margin: 0 0 .6rem; color: #fff; font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hd .hd-hero-lead { position: relative; margin: 0 0 1.3rem; max-width: 46rem; color: rgba(255, 255, 255, .92); font-size: 1.05rem; line-height: 1.6; }
.hd .hd-finder { position: relative; display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; background: #fff; border-radius: 18px; padding: .9rem; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); max-width: 46rem; }
.hd .hd-field { flex: 1 1 200px; margin: 0; display: block; }
.hd .hd-field span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5a6b80; margin: 0 0 .25rem .2rem; }
.hd .hd-field select { width: 100%; padding: .7rem .8rem; border: 1.5px solid #d3dfe9; border-radius: 12px; font-size: 1rem; font-weight: 600; color: #0b2239; background: #fff; }
.hd .hd-field select:focus { outline: none; border-color: #0a8f9b; box-shadow: 0 0 0 4px rgba(10, 143, 155, .15); }
.hd .hd-go { flex: 0 0 auto; border: 0; border-radius: 12px; padding: .75rem 1.6rem; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(135deg, #0f9d9a, #16b8a4); box-shadow: 0 8px 20px rgba(22, 184, 164, .4); cursor: pointer; }
.hd .hd-go:hover { filter: brightness(.96); }
.hd .hd-assure { position: relative; list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .9rem; color: rgba(255, 255, 255, .9); }
.hd .hd-assure i { color: #7fe3d6; margin-right: .35rem; }

.hd .hd-section { margin: 0 0 2rem; }
.hd .hd-section > h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; color: #0b2239; margin: 0 0 1rem; }
.hd .hd-section > h2 small { font-size: .85rem; font-weight: 600; color: #5a6b80; margin-left: .4rem; }
.hd .hd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hd .hd-tile { background: #fff; border: 1px solid #e3ebf3; border-radius: 18px; padding: 1rem 1.1rem; transition: box-shadow .2s, transform .2s, border-color .2s; }
.hd .hd-tile:hover { box-shadow: 0 14px 34px rgba(11, 34, 57, .10); transform: translateY(-2px); border-color: #c9e6ea; }
.hd .hd-tile-main { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; }
.hd .hd-ico { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: #e4f6f7; color: #0a8f9b; font-size: 1.5rem; }
.hd .hd-ico--sm { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; }
.hd .hd-tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hd .hd-tile-text strong { font-size: 1.1rem; color: #0b2239; line-height: 1.25; }
.hd .hd-tile-text small { color: #5a6b80; font-size: .85rem; }
.hd .hd-arrow { color: #9fb2c4; transition: transform .2s, color .2s; }
.hd .hd-tile:hover .hd-arrow, .hd .hd-citytile:hover .hd-arrow { transform: translateX(3px); color: #0a8f9b; }
.hd .hd-tile-cities { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed #e3ebf3; }
.hd .hd-tile-cities a, .hd .hd-citykinds a { text-decoration: none; background: #f3f8fa; color: #0b2239; border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; font-weight: 600; }
.hd .hd-tile-cities a:hover, .hd .hd-citykinds a:hover { background: #e4f6f7; color: #076d77; }
.hd .hd-tile-cities small, .hd .hd-citykinds small { color: #5a6b80; font-weight: 700; margin-left: .15rem; }

.hd .hd-citycards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hd .hd-citycard { background: linear-gradient(180deg, #fff, #f7fbfc); border: 1px solid #e3ebf3; border-radius: 18px; padding: 1.1rem 1.2rem; }
.hd .hd-citycard h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0b2239; }
.hd .hd-citycard h3 i { color: #0a8f9b; margin-right: .2rem; }
.hd .hd-citycard p { margin: .15rem 0 .7rem; color: #5a6b80; font-size: .88rem; }
.hd .hd-citykinds { display: flex; flex-wrap: wrap; gap: .4rem; }

.hd .hd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hd .hd-steps li { display: flex; gap: .9rem; background: #fff; border: 1px solid #e3ebf3; border-radius: 18px; padding: 1.1rem 1.2rem; }
.hd .hd-steps li > span { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0b2239; color: #fff; font-weight: 800; }
.hd .hd-steps strong { display: block; color: #0b2239; margin-bottom: .2rem; }
.hd .hd-steps small { color: #5a6b80; line-height: 1.5; font-size: .9rem; }

.hd .hd-citytiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.hd .hd-citytile { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e3ebf3; border-radius: 16px; padding: .85rem 1rem; transition: box-shadow .2s, transform .2s, border-color .2s; }
.hd .hd-citytile:hover { box-shadow: 0 12px 28px rgba(11, 34, 57, .10); transform: translateY(-2px); border-color: #c9e6ea; }
.hd .hd-back { margin: 1.2rem 0 0; }
.hd .hd-back a { color: #076d77; font-weight: 700; text-decoration: none; }
.hd .hd-note--page { margin: 0 0 1.4rem; }

@media (max-width: 991.98px) {
  .hd .hd-tiles, .hd .hd-citycards, .hd .hd-citytiles, .hd .hd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .hd .hd-hero { padding: 1.5rem 1.2rem 1.2rem; border-radius: 20px; }
  .hd .hd-tiles, .hd .hd-citycards, .hd .hd-citytiles, .hd .hd-steps { grid-template-columns: minmax(0, 1fr); }
  .hd .hd-go { width: 100%; }
}
.hd .hd-hero .hd-assure li { color: rgba(255, 255, 255, .92); }

/* ---------- photo cards and the kind page header photo ---------- */
.hd .hd-tile--photo { padding: 0; overflow: hidden; }
.hd .hd-tile--photo .hd-tile-main { display: block; }
.hd .hd-photo { position: relative; display: block; height: 170px; background: linear-gradient(135deg, #0c4a5e, #0a8f9b); overflow: hidden; }
.hd .hd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.hd .hd-tile--photo:hover .hd-photo img { transform: scale(1.06); }
.hd .hd-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 36, .05) 25%, rgba(8, 20, 36, .78) 100%); }
.hd .hd-photo-label { position: absolute; left: 1rem; right: 3rem; bottom: .8rem; z-index: 2; display: flex; flex-direction: column; color: #fff; }
.hd .hd-photo-label strong { color: #fff; font-size: 1.2rem; line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.hd .hd-photo-label small { color: rgba(255, 255, 255, .9); font-size: .85rem; }
.hd .hd-photo .hd-arrow { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; color: #fff; font-size: 1.1rem; }
.hd .hd-tile--photo:hover .hd-arrow { color: #fff; }
.hd .hd-photo-ico { display: none; position: absolute; top: 1rem; left: 1rem; z-index: 2; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.4rem; }
.hd .hd-photo--none .hd-photo-ico { display: grid; }
.hd .hd-tile--photo .hd-tile-cities { margin: 0; padding: .8rem 1rem .9rem; border-top: 0; }

.hd .hd-hero--photo { background-image: linear-gradient(90deg, rgba(11, 34, 57, .93) 0%, rgba(11, 34, 57, .72) 42%, rgba(11, 34, 57, .18) 100%), var(--hd-img); background-size: cover; background-position: center 30%; min-height: 230px; }
.hd .hd-hero--photo .hd-hero-bg { display: none; }
.hd-credits { margin: -.6rem 0 1.4rem; font-size: .78rem; color: #6b7a8c; }
.hd-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }