:root {
  --doctors-blue: #087cf0;
  --doctors-ink: #101114;
  --doctors-muted: #687384;
  --doctors-line: #e0e5eb;
  --doctors-soft: #f5f7fa;
}

body.our-doctors-page {
  color: var(--doctors-ink);
  background: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.doctors-catalog-hero {
  position: relative;
  padding: clamp(76px, 8vw, 116px) 0 clamp(72px, 7vw, 104px);
  background:
    radial-gradient(circle at 17% 30%, rgba(56, 194, 247, .16), transparent 28rem),
    radial-gradient(circle at 83% 24%, rgba(101, 70, 255, .13), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, #fff 88%);
  overflow: hidden;
}

.doctors-catalog-hero::after {
  position: absolute;
  width: 430px;
  height: 430px;
  right: -240px;
  bottom: -250px;
  border: 1px solid rgba(89, 91, 246, .15);
  border-radius: 50%;
  content: "";
}

.doctors-catalog-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1020px;
  text-align: center;
}

.doctors-catalog-kicker {
  margin: 0 0 20px;
  color: var(--doctors-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.doctors-catalog-hero h1 {
  max-width: 1020px;
  margin: 0 auto;
  font-size: clamp(48px, 5.3vw, 76px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .96;
  text-wrap: balance;
}

.doctors-catalog-lead {
  max-width: 790px;
  margin: 30px auto 0;
  color: var(--doctors-muted);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.48;
}

.doctors-catalog-hero-actions {
  display: flex;
  margin-top: 32px;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.doctors-catalog-hero-actions > p {
  max-width: 330px;
  margin: 0;
  color: #7a828d;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.doctors-primary-button {
  display: inline-flex;
  min-height: 54px;
  padding: 0 25px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #0ba1eb 0%, #246eea 55%, #6648f1 100%);
  box-shadow: 0 15px 34px rgba(43, 99, 226, .2);
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease;
}

.doctors-primary-button:hover {
  box-shadow: 0 19px 40px rgba(43, 99, 226, .26);
  transform: translateY(-2px);
}

.doctors-catalog {
  padding: clamp(76px, 7vw, 108px) 0;
}

.doctors-catalog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.doctors-catalog-head .doctors-catalog-kicker { margin-bottom: 12px; }

.doctors-catalog-head h2 {
  margin: 0;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}

.doctors-catalog-head > p {
  margin: 0 0 5px;
  color: var(--doctors-muted);
  font-size: 15px;
}

.doctors-filter-panel {
  margin-top: 34px;
  padding: 14px;
  border: 1px solid var(--doctors-line);
  border-radius: 26px;
  background: rgba(247, 249, 252, .86);
}

.doctors-search {
  display: flex;
  height: 58px;
  padding: 0 19px;
  border: 1px solid #e1e6ec;
  border-radius: 17px;
  background: #fff;
  align-items: center;
  gap: 13px;
}

.doctors-search svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #7a8797;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.doctors-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--doctors-ink);
  background: transparent;
  font-size: 16px;
}

.doctors-search input::placeholder { color: #929aa5; }

.doctors-filter-controls {
  display: grid;
  padding-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.doctors-filter-dropdown {
  position: relative;
  min-width: 0;
}

.doctors-filter-dropdown > summary {
  display: grid;
  min-height: 68px;
  padding: 12px 17px;
  border: 1px solid #e0e5eb;
  border-radius: 17px;
  background: #fff;
  cursor: pointer;
  list-style: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 2px 16px;
}

.doctors-filter-dropdown > summary::-webkit-details-marker { display: none; }

.doctors-filter-dropdown > summary span {
  color: #89919c;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.doctors-filter-dropdown > summary strong {
  color: #293545;
  font-size: 15px;
  font-weight: 650;
}

.doctors-filter-dropdown > summary svg {
  width: 18px;
  height: 18px;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  fill: none;
  stroke: #647184;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform .2s ease;
}

.doctors-filter-dropdown[open] > summary {
  border-color: #acd3fb;
  box-shadow: 0 0 0 3px rgba(8, 124, 240, .08);
}

.doctors-filter-dropdown[open] > summary svg { transform: rotate(180deg); }

.doctors-filter-menu,
.doctors-experience-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #dde4ec;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 55px rgba(39, 57, 82, .15);
}

.doctors-filter-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.doctors-filter-menu button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  color: #546071;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

.doctors-filter-menu button:hover { background: #f2f6fa; }

.doctors-filter-menu button.is-active {
  color: #0874dd;
  background: #eaf4ff;
}

.doctors-experience-menu { padding: 21px 19px 17px; }

.doctors-experience-heading {
  display: flex;
  margin-bottom: 18px;
  color: #667282;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
}

.doctors-experience-heading output {
  color: #0874dd;
  font-weight: 700;
}

.doctors-experience-menu input[type="range"] {
  width: 100%;
  height: 5px;
  margin: 0;
  border-radius: 999px;
  outline: none;
  appearance: none;
  background: linear-gradient(90deg, #087cf0 0 var(--range-progress, 0%), #dfe6ee var(--range-progress, 0%) 100%);
}

.doctors-experience-menu input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 4px solid #fff;
  border-radius: 50%;
  appearance: none;
  background: #087cf0;
  box-shadow: 0 2px 10px rgba(8, 124, 240, .32);
  cursor: grab;
}

.doctors-experience-menu input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #087cf0;
  box-shadow: 0 2px 10px rgba(8, 124, 240, .32);
  cursor: grab;
}

.doctors-experience-scale {
  display: flex;
  margin-top: 10px;
  color: #9aa2ad;
  justify-content: space-between;
  font-size: 10px;
}

.doctors-grid {
  display: grid;
  margin-top: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.catalog-doctor-card {
  min-width: 0;
  border: 1px solid var(--doctors-line);
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
}

.catalog-doctor-card[hidden] { display: none; }

.catalog-doctor-card:hover {
  box-shadow: 0 25px 60px rgba(31, 54, 95, .1);
  transform: translateY(-4px);
}

.catalog-doctor-card figure {
  height: 300px;
  margin: 0;
  background: #eef2f6;
  overflow: hidden;
}

.catalog-doctor-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(.9) contrast(.98);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.catalog-doctor-card:hover img { transform: scale(1.025); }

.catalog-doctor-card-body {
  display: flex;
  min-height: 315px;
  padding: 24px;
  flex-direction: column;
}

.catalog-doctor-specialty {
  margin: 0;
  color: var(--doctors-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.catalog-doctor-card h3 {
  margin: 11px 0 0;
  font-size: clamp(26px, 2vw, 31px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.03;
}

.catalog-doctor-focus {
  margin: 12px 0 0;
  color: #68717e;
  font-size: 14px;
  line-height: 1.48;
}

.catalog-doctor-tags {
  display: flex;
  margin-top: 17px;
  flex-wrap: wrap;
  gap: 7px;
}

.catalog-doctor-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #5b6675;
  background: #f2f5f8;
  font-size: 11px;
}

.catalog-doctor-card-body > a {
  display: inline-flex;
  width: max-content;
  min-height: 43px;
  margin-top: auto;
  padding: 0 18px;
  border: 1px solid #bdd9f8;
  border-radius: 999px;
  color: #0874dd;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  font-weight: 700;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.catalog-doctor-card-body > a:hover {
  border-color: var(--doctors-blue);
  color: #fff;
  background: var(--doctors-blue);
}

.doctors-empty {
  margin-top: 28px;
  padding: 64px 24px;
  border: 1px solid var(--doctors-line);
  border-radius: 28px;
  background: var(--doctors-soft);
  text-align: center;
}

.doctors-empty h3 { margin: 0; font-size: 27px; }
.doctors-empty p { margin: 10px 0 20px; color: var(--doctors-muted); }
.doctors-empty button { padding: 11px 17px; border: 1px solid #cbd5e1; border-radius: 999px; color: #344154; background: #fff; cursor: pointer; }

.doctors-catalog-note {
  margin: 14px 0 0;
  color: #989da5;
  font-size: 11px;
  text-align: right;
}

.doctors-access {
  padding: 0 0 clamp(82px, 8vw, 120px);
}

.doctors-access-card {
  display: grid;
  min-height: 280px;
  padding: clamp(34px, 4.5vw, 58px);
  border: 1px solid #d9e4f2;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 90%, rgba(38, 183, 246, .2), transparent 24rem),
    radial-gradient(circle at 90% 8%, rgba(105, 70, 246, .18), transparent 26rem),
    #f4f8ff;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 50px;
}

.doctors-access-card .doctors-catalog-kicker { margin-bottom: 14px; }

.doctors-access h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}

.doctors-access-card > div > p:last-child {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--doctors-muted);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .doctors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doctors-catalog-hero-actions { flex-direction: column; }
  .doctors-catalog-hero-actions > p { text-align: center; }
  .doctors-access-card { grid-template-columns: 1fr; gap: 28px; }
  .doctors-access-card .doctors-primary-button { justify-self: start; }
}

@media (max-width: 680px) {
  .doctors-catalog-hero { padding: 58px 0 70px; }
  .doctors-catalog-hero h1 { font-size: clamp(41px, 12vw, 54px); }
  .doctors-catalog-lead { margin-top: 24px; font-size: 17px; }
  .doctors-catalog-hero-actions { margin-top: 27px; }
  .doctors-primary-button { width: 100%; }
  .doctors-catalog { padding: 64px 0 72px; }
  .doctors-catalog-head { align-items: start; flex-direction: column; gap: 12px; }
  .doctors-catalog-head h2 { font-size: 39px; }
  .doctors-filter-panel { margin-top: 26px; padding: 10px; border-radius: 21px; }
  .doctors-search { height: 54px; border-radius: 14px; }
  .doctors-filter-controls { grid-template-columns: 1fr; }
  .doctors-filter-dropdown > summary { min-height: 62px; }
  .doctors-filter-menu,
  .doctors-experience-menu { position: static; margin-top: 7px; box-shadow: 0 12px 30px rgba(39, 57, 82, .1); }
  .doctors-grid { grid-template-columns: 1fr; }
  .catalog-doctor-card { border-radius: 25px; }
  .catalog-doctor-card figure { height: 310px; }
  .catalog-doctor-card-body { min-height: 292px; padding: 22px; }
  .doctors-catalog-note { text-align: left; }
  .doctors-access { padding-bottom: 72px; }
  .doctors-access-card { padding: 30px 22px; border-radius: 27px; }
  .doctors-access h2 { font-size: 38px; }
}