/* Services page additions. Shared components remain in styles.css. */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 25px 0;
  font-size: 12px;
  color: #93a3b7;
}
.breadcrumbs a {
  color: #69859e;
}
.breadcrumbs a:hover {
  color: var(--color-cyan);
}
.main-nav a[aria-current="page"] {
  color: #078ebd;
}
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.services-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gradient-panel);
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 50px;
  padding: 55px 64px 56px;
}
.services-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/dental-pattern.svg") repeat;
  opacity: 0.35;
  mask-image: linear-gradient(90deg, transparent, #000);
}
.services-intro h1 {
  font-size: 64px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -3px;
  margin-top: 22px;
}
.services-intro__lead {
  font-size: 16px;
  line-height: 1.85;
  color: #58758f;
  max-width: 610px;
  margin-top: 24px;
}
.services-intro__history {
  font-size: 14px;
  line-height: 1.85;
  color: #7b90a5;
  max-width: 570px;
  margin-top: 15px;
}
.services-intro__actions {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-top: 26px;
}
.services-intro__browse {
  font-size: 12px;
  font-weight: 600;
  color: #5884a0;
}
.services-intro__visual {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  min-height: 390px;
}
.services-intro__orbit {
  border: 1px solid #c4e4f4;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: #ffffff87;
  box-shadow: 0 0 0 17px #ffffff3b;
  display: grid;
  place-items: center;
  position: relative;
}
.services-intro__orbit img {
  width: 245px;
  height: 300px;
  object-fit: contain;
}
.services-intro__orbit i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #25aace;
  position: absolute;
}
.services-intro__orbit i:nth-of-type(1) {
  top: 22px;
  left: 73px;
}
.services-intro__orbit i:nth-of-type(2) {
  right: -4px;
  top: 170px;
}
.services-intro__orbit i:nth-of-type(3) {
  bottom: 23px;
  left: 73px;
}
.clinic-since {
  position: absolute;
  bottom: 0;
  left: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 19px 25px;
  border: 1px solid #fff;
  border-radius: 20px;
  background: #ffffffda;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px #5883a00a;
}
.clinic-since > span {
  font-size: 25px;
  letter-spacing: -1px;
  font-weight: 600;
  color: #2584c7;
}
.clinic-since small {
  font-size: 11px;
  color: #7890a6;
}
.intro-sparkle {
  position: absolute;
  right: 0;
  top: -5px;
  width: 40px;
  height: 40px;
  fill: #9895f1;
}
.service-catalog {
  padding-top: 58px;
  padding-bottom: 35px;
}
.section-kicker {
  text-transform: uppercase;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  font-weight: 600;
  color: #5ca4bb !important;
  margin-bottom: 12px;
}
.service-catalog .section-heading h2 {
  font-size: 37px;
  font-weight: 500;
}
.service-catalog .section-heading > div > p:last-child {
  font-size: 14px;
  margin-top: 12px;
}
.catalog-count {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 35px;
  font-weight: 400;
  color: #6fb6d0;
  letter-spacing: -1px;
}
.catalog-count > span {
  font-size: 11px;
  color: #93a5b6;
  letter-spacing: 0;
}
.service-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
  margin-top: 30px;
}
.catalog-card {
  padding: 13px;
  transition:
    transform var(--transition),
    box-shadow var(--transition);
  background: linear-gradient(145deg, #edf9ff, #e7f5fc);
}
.catalog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px #69a5cf16;
}
.catalog-card__photo {
  position: relative;
}
.catalog-card .service-card__image {
  height: 192px;
}
.catalog-card__number {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  background: #ffffffe0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #5487ab;
  backdrop-filter: blur(6px);
}
.catalog-card .service-card__body {
  padding: 20px 10px 8px;
  display: flex;
  flex-direction: column;
  min-height: 198px;
}
.catalog-card h3 {
  font-size: 20px;
  font-weight: 600;
}
.catalog-card p {
  padding: 0;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0;
  margin-top: 11px;
  color: #7c91a5;
}
.catalog-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  padding-top: 16px;
}
.catalog-card__actions > a {
  font-size: 12px;
  font-weight: 600;
  color: #269dc0;
}
.catalog-card__actions > a:hover {
  color: #7c73db;
}
.catalog-card__actions .round-arrow {
  width: 37px;
  height: 37px;
}
.catalog-card__actions .icon {
  width: 21px;
  height: 21px;
}
.service-guidance {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 30px;
  margin-top: 0;
  margin-bottom: 48px;
  border: 1px solid #e0edf8;
  border-radius: 24px;
  background: #fcfeff;
}
.service-guidance__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: #e6f7fd;
  border-radius: 18px;
  color: #4a95b0;
  flex-shrink: 0;
}
.service-guidance__icon .icon {
  width: 37px;
  height: 37px;
  stroke-width: 1.2;
}
.service-guidance > div {
  flex: 1;
}
.service-guidance h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.6px;
}
.service-guidance p {
  font-size: 12px;
  line-height: 1.8;
  color: #8a9bab;
  max-width: 660px;
  margin-top: 8px;
}
.service-guidance .button {
  font-size: 12px;
  gap: 15px;
  min-height: 48px;
  padding-left: 20px;
  flex-shrink: 0;
}
.service-request {
  background: var(--gradient-panel);
  padding: 54px 65px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 90px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.service-request::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/dental-pattern.svg");
  opacity: 0.4;
  z-index: -1;
}
.service-request__copy {
  align-self: center;
  min-width: 0;
}
.service-request__copy h2 {
  font-size: 47px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -2px;
}
.service-request__copy h2 > span {
  color: #40a5c1;
}
.service-request__copy > p:not(.section-kicker) {
  font-size: 15px;
  line-height: 1.85;
  max-width: 405px;
  color: #6f889e;
  margin-top: 24px;
}
.service-request__phone {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.9px;
  margin-top: 31px;
}
.service-request__phone .icon {
  width: 24px;
  height: 24px;
  color: #19a5c8;
}
.service-request__copy address {
  font-style: normal;
  font-size: 13px;
  color: #7c93a8;
  line-height: 1.8;
  margin-top: 15px;
}
.services-form {
  padding: 29px 28px;
  gap: 9px;
  border-radius: 27px;
  align-self: center;
  min-width: 0;
}
.services-form h3 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.7px;
}
.services-form__subtitle {
  font-size: 11px;
  color: #8b9eb2;
  margin-bottom: 8px;
}
.services-form__label {
  font-size: 11px;
  color: #6c839b;
  margin: 4px 0 0 3px;
}
.services-form .form-field {
  min-height: 45px;
}
.services-form__select select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  color: #6c839b;
  background: transparent;
  border: 0;
  padding: 12px 16px 12px 0;
  outline-offset: 2px;
}
.services-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 9px;
  line-height: 1.8;
  color: #93a3b3;
  margin-top: 7px;
}
.services-form__consent input {
  margin: 3px 0 0;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  accent-color: #11add0;
}
.services-form__consent a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #7894ae;
}
.services-form .button {
  margin-top: 9px;
  font-size: 13px;
  padding-left: 22px;
}
.page-services .site-footer {
  margin-top: 48px;
}
@media (max-width: 1200px) {
  .services-intro {
    padding: 44px 40px;
    gap: 30px;
  }
  .services-intro h1 {
    font-size: 53px;
  }
  .services-intro__lead {
    font-size: 14px;
  }
  .services-intro__history {
    font-size: 12px;
  }
  .services-intro__orbit {
    width: 275px;
    height: 275px;
  }
  .services-intro__orbit img {
    width: 200px;
    height: 245px;
  }
  .services-intro__visual {
    min-height: 325px;
  }
  .services-intro__orbit i:nth-of-type(2) {
    top: 130px;
  }
  .clinic-since {
    padding: 15px 20px;
  }
  .clinic-since > span {
    font-size: 22px;
  }
  .catalog-card .service-card__image {
    height: 165px;
  }
  .catalog-card h3 {
    font-size: 18px;
  }
  .catalog-card p {
    font-size: 13px;
  }
  .service-request {
    padding: 44px;
    gap: 45px;
  }
  .service-request__copy h2 {
    font-size: 40px;
  }
  .service-request__phone {
    font-size: 23px;
  }
  .services-form {
    padding: 24px;
  }
  .service-guidance {
    gap: 20px;
    padding: 24px;
  }
  .service-guidance h2 {
    font-size: 19px;
  }
}
@media (max-width: 900px) {
  .services-intro {
    grid-template-columns: 1.5fr 1fr;
    padding: 35px 30px;
    gap: 20px;
  }
  .services-intro h1 {
    font-size: 44px;
    letter-spacing: -2px;
  }
  .services-intro__lead {
    font-size: 13px;
  }
  .services-intro__history {
    font-size: 12px;
  }
  .services-intro__orbit {
    width: 210px;
    height: 210px;
  }
  .services-intro__orbit img {
    width: 155px;
    height: 190px;
  }
  .services-intro__visual {
    min-height: 275px;
  }
  .services-intro__orbit i:nth-of-type(2) {
    top: 100px;
  }
  .clinic-since {
    left: -15px;
    bottom: -5px;
    padding: 13px 18px;
  }
  .clinic-since > span {
    font-size: 20px;
  }
  .clinic-since small {
    font-size: 9px;
  }
  .services-intro__actions {
    gap: 18px;
  }
  .services-intro__actions .button {
    font-size: 12px;
    min-height: 48px;
    padding-left: 20px;
    gap: 15px;
  }
  .services-intro__browse {
    font-size: 10px;
  }
  .service-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-card .service-card__image {
    height: 180px;
  }
  .service-guidance {
    flex-wrap: wrap;
  }
  .service-guidance .button {
    margin-left: 82px;
  }
  .service-catalog .section-heading h2 {
    font-size: 31px;
  }
  .service-request {
    gap: 30px;
    padding: 35px;
  }
  .service-request__copy h2 {
    font-size: 34px;
  }
  .service-request__copy > p:not(.section-kicker) {
    font-size: 13px;
  }
  .service-request__phone {
    font-size: 20px;
  }
  .services-form {
    padding: 22px 18px;
  }
  .services-form h3 {
    font-size: 21px;
  }
}
@media (max-width: 760px) {
  .breadcrumbs {
    font-size: 10px;
    padding: 20px 0;
  }
  .services-intro {
    grid-template-columns: minmax(0, 1fr);
    padding: 30px 24px;
    gap: 26px;
  }
  .services-intro h1 {
    font-size: 43px;
    letter-spacing: -2px;
    margin-top: 20px;
  }
  .services-intro__lead {
    font-size: 13px;
    line-height: 1.85;
    margin-top: 20px;
  }
  .services-intro__history {
    font-size: 12px;
    margin-top: 14px;
  }
  .services-intro__actions {
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 23px;
  }
  .services-intro__visual {
    min-height: 245px;
  }
  .services-intro__orbit {
    width: 210px;
    height: 210px;
  }
  .clinic-since {
    left: calc(50% - 145px);
    bottom: -3px;
  }
  .intro-sparkle {
    right: 12%;
    width: 28px;
    height: 28px;
  }
  .service-catalog {
    padding-top: 35px;
    padding-bottom: 24px;
  }
  .service-catalog .section-heading {
    align-items: center;
  }
  .service-catalog .section-heading h2 {
    font-size: 28px;
  }
  .service-catalog .section-heading > div > p:last-child {
    font-size: 12px;
    max-width: 250px;
  }
  .catalog-count {
    display: none;
  }
  .section-kicker {
    font-size: 9px !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 10px;
  }
  .service-catalog__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
    margin-top: 22px;
  }
  .catalog-card {
    padding: 12px;
  }
  .catalog-card .service-card__image {
    height: auto;
    aspect-ratio: 2.05;
  }
  .catalog-card .service-card__body {
    padding: 18px 9px 7px;
    min-height: 180px;
  }
  .catalog-card h3 {
    font-size: 20px;
  }
  .catalog-card p {
    font-size: 13px;
  }
  .catalog-card__actions {
    padding-top: 16px;
  }
  .service-guidance {
    padding: 21px;
    margin-bottom: 30px;
    gap: 16px;
  }
  .service-guidance__icon {
    width: 45px;
    height: 45px;
    border-radius: 14px;
  }
  .service-guidance__icon .icon {
    width: 30px;
    height: 30px;
  }
  .service-guidance > div {
    flex-basis: calc(100% - 61px);
  }
  .service-guidance h2 {
    font-size: 18px;
  }
  .service-guidance p {
    font-size: 11px;
  }
  .service-guidance .button {
    margin-left: 0;
    min-height: 44px;
    font-size: 11px;
  }
  .service-request {
    padding: 30px 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .service-request__copy h2 {
    font-size: 35px;
  }
  .service-request__copy > p:not(.section-kicker) {
    font-size: 13px;
    margin-top: 18px;
  }
  .service-request__phone {
    font-size: 23px;
    margin-top: 20px;
  }
  .service-request__copy address {
    font-size: 12px;
    margin-top: 12px;
  }
  .services-form {
    padding: 23px 18px;
  }
  .services-form .button {
    font-size: 13px;
  }
  .services-form__consent {
    font-size: 9px;
  }
  .page-services .site-footer {
    margin-top: 30px;
  }
}
@media (max-width: 370px) {
  .services-intro {
    padding-inline: 20px;
  }
  .services-intro h1 {
    font-size: 36px;
  }
  .services-intro__actions {
    gap: 14px;
  }
  .services-intro__actions .button {
    font-size: 11px;
    gap: 10px;
    padding-left: 16px;
  }
  .services-intro__browse {
    font-size: 9px;
  }
  .services-intro__visual {
    min-height: 230px;
  }
  .clinic-since {
    left: 0;
  }
  .service-catalog .section-heading h2 {
    font-size: 25px;
  }
  .service-request {
    padding-inline: 20px;
  }
  .service-request__copy h2 {
    font-size: 30px;
  }
  .service-request__phone {
    font-size: 20px;
  }
  .services-form {
    padding: 22px 15px;
  }
  .services-form .button {
    font-size: 12px;
  }
}