/* SwasthiQ site header for the Ghost blog. Extracted from www.swasthiq.com (main @ 807ed10, 29 Oct 2026).
   Font: Montserrat 400-800 (Google Fonts). */
:root {
  --ease: cubic-bezier(.16,1,.3,1);
  --faint: #667085;
  --hairline: #E7EAF0;
  --ink: #0F1222;
  --navy: #003C89;
  --sh-1: 0 2px 10px rgba(15,18,34,.05);
  --sh-2: 0 28px 64px -28px rgba(15,18,34,.22);
  --soft: #F5F7FA;
  --teal: #58D0D8;
  --teal-100: #E9F8F9;
  --teal-700: #16707A;
}
.nav2, .nav2 *, .nav2-panel, .nav2-panel * { box-sizing: border-box; }
.nav2 a, .nav2-panel a { color: var(--teal-700); }
.nav2 a:hover, .nav2-panel a:hover { color: var(--navy); }
.nav2 img { max-width: 100%; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0px 30px; border-radius: 999px; font-family: Montserrat, Mukta, sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 0px; transition: transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease); white-space: nowrap; }
.btn2:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.btn2.pri { background: var(--teal-700); color: rgb(255, 255, 255); box-shadow: rgba(88, 208, 216, 0.3) 0px 0px 40px; }
.btn2.pri:hover { background: rgb(25, 117, 125); color: rgb(255, 255, 255); transform: translateY(-2px); }
.btn2.sec { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn2.sec:hover { background: var(--ink); color: rgb(255, 255, 255); }
.darkv .btn2.sec { color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.6); }
.darkv .btn2.sec:hover { background: rgb(255, 255, 255); color: var(--ink); }
.btn2.sm { height: 44px; padding: 0px 22px; font-size: 13.5px; }
.nav2 { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 4px; height: 62px; padding: 0px 10px 0px 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(15, 18, 34, 0.08); backdrop-filter: blur(16px); box-shadow: var(--sh-1); transition: height .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease); max-width: calc(-24px + 100vw); }
.nav2.scrolled { height: 54px; background: rgba(255, 255, 255, 0.97); box-shadow: var(--sh-2); }
.nav2 .logo2 { display: flex; align-items: center; margin-right: 16px; }
.nav2 .logo2 img { height: 26px; width: auto; max-width: none; display: block; }
.nav2 .lnk { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background .25s var(--ease),color .25s var(--ease); white-space: nowrap; }
.nav2 .lnk:hover { background: var(--soft); color: var(--teal-700); }
.nav2 .lnk::after { content: ""; position: absolute; inset: -12px -3px; }
.nav2 .lnk.act, .nav2 .soon2 { background: var(--teal-100); color: var(--teal-700); }
.nav2 .soon2 { font-size: 8.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; letter-spacing: 0.05em; }
.nav2 .btn2 { margin-left: 10px; }
.nav2 .burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 6px; border: none; background: transparent; border-radius: 999px; color: var(--ink); cursor: pointer; }
.nav2 .burger:hover { background: var(--soft); color: var(--teal-700); }
.nav2-panel { position: fixed; top: 88px; left: 14px; right: 14px; z-index: 99; display: none; flex-direction: column; gap: 4px; padding: 12px; border-radius: 24px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(18px); border: 1px solid rgba(15, 18, 34, 0.08); box-shadow: var(--sh-2); }
.nav2-panel.open { display: flex; }
.nav2-panel a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav2-panel a:hover { background: var(--soft); color: var(--teal-700); }
.nav2-panel a.act { background: var(--teal-100); color: var(--teal-700); }
.nav2-panel .btn2 { justify-content: center; margin-top: 6px; color: rgb(255, 255, 255); }
@media (min-width: 1251px) {
.nav2-panel { display: none !important; }
}
@media (max-width: 1250px) {
.nav2 .lnk { display: none; }
.nav2 .burger { display: inline-flex; }
}
@media (max-width: 520px) {
.nav2 > .btn2 { display: none; }
.nav2 { padding-right: 8px; }
}
.nav2-dd { position: relative; display: flex; }
.nav2-dd .lnk i, .nav2-dd .lnk svg { transition: transform .25s var(--ease); }
.nav2-dd:focus-within .lnk svg, .nav2-dd:hover .lnk i, .nav2-dd:hover .lnk svg { transform: rotate(180deg); }
.nav2-menu { position: absolute; top: calc(100% + 10px); left: -12px; display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 6px 18px; padding: 18px; background: rgb(255, 255, 255); border: 1px solid var(--hairline); border-radius: 20px; box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease),transform .2s var(--ease),visibility .2s; }
.nav2-menu::before { content: ""; position: absolute; left: 0px; right: 0px; top: -12px; height: 12px; }
.nav2-dd:focus-within .nav2-menu, .nav2-dd:hover .nav2-menu { opacity: 1; visibility: visible; transform: none; }
.nav2-menu-col { display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
.nav2-menu-h { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 4px 10px 6px; }
.nav2-menu a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.nav2-menu a:focus-visible, .nav2-menu a:hover { background: var(--soft); color: var(--teal-700); outline: none; }
.nav2-menu a.nav2-menu-all { color: var(--teal-700); font-weight: 700; }
@media (max-width: 1250px) {
.nav2-dd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav2-dd .lnk svg, .nav2-menu { transition: none; }
}
.nav2-menu.nav2-menu-3 { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
.nav2-menu.nav2-menu-1 { grid-template-columns: minmax(230px, 1fr); }
.nav2-menu.wide { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
.nav2-menu a small { display: block; font-size: 11.5px; font-weight: 500; color: var(--faint); white-space: normal; margin-top: 2px; }
.nav2-menu a .soon2, .nav2-panel a .soon2 { margin-left: 4px; }
.nav2-panel { max-height: calc(-104px + 100dvh); overflow-y: auto; overscroll-behavior: contain; }
.nav2-panel-h { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 12px 16px 2px; }
.nav2-panel a { min-height: 44px; }
.nav2-panel .soon2 { font-size: 8.5px; font-weight: 800; color: var(--teal-700); background: var(--teal-100); border-radius: 999px; padding: 2px 7px; letter-spacing: 0.05em; }
.spx { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.spx-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; }
.spx-box { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0px 12px; border: 1px solid var(--hairline,#e5e7eb); border-radius: 10px; background: var(--soft,#f6f8fb); transition: border-color .2s var(--ease),background .2s var(--ease); }
.spx-box:focus-within { border-color: var(--teal); background: rgb(255, 255, 255); }
.spx-box svg { width: 15px; height: 15px; color: var(--faint); flex: 0 0 auto; }
.spx-box input { flex: 1 1 0%; min-width: 0px; border: 0px; outline: 0px; background: none; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 13.5px; color: var(--ink); }
.spx-list { display: flex; flex-direction: column; max-height: 248px; overflow-y: auto; overscroll-behavior: contain; margin: 0px -4px; padding: 0px 4px; scrollbar-width: thin; }
.nav2-menu .spx-list a, .nav2-panel .spx-list a { font-size: 13.5px; font-weight: 600; padding: 7px 10px; white-space: normal; }
.spx-none { margin: 6px 10px; font-size: 13px; color: var(--faint); }
.nav2-panel .spx { padding: 4px 16px 8px; }
.nav2-panel .spx-list { max-height: 220px; }
.nav2-menu.nav2-menu-3:has(.spx) { grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(250px, 1.25fr); }
.nav2-menu .spx { min-width: 0px; }
.consent .btn2 { height: 42px; padding: 0px 26px; font-size: 14px; }
@media (max-width: 560px) {
.consent .btn2 { flex: 1 1 0%; }
}
.eyebrow .soon2, .scw-tag .soon2 { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 9px; font-weight: 800; color: var(--teal-700); background: var(--teal-100); border-radius: 999px; padding: 2px 8px; letter-spacing: 0.05em; }
.dn-work-next .soon2 { display: inline-block; margin-right: 8px; font-size: 9px; font-weight: 800; color: var(--teal-700); background: var(--teal-100); border-radius: 999px; padding: 2px 8px; letter-spacing: 0.08em; vertical-align: middle; }
/* Fixes for hosts whose own CSS isn't the site's (found by Extra 2 in Ghost's Source theme, 29 Oct 2026). */
/* 1. A global svg { max-width: 100% } shrank the menu chevrons to 0px. */
.nav2 svg, .nav2-panel svg { max-width: none; flex-shrink: 0; }
/* 2. A taller body line-height pushed items out of the 248px specialty list. */
.nav2, .nav2-panel { line-height: normal; }
/* 3. .nav2-panel a { display: flex } beats the hidden attribute, so the phone specialty filter hid nothing
      (www only works thanks to its global [hidden] reset). */
.nav2 [hidden], .nav2-panel [hidden] { display: none !important; }