* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ffffff;
  font-family: "Outfit", sans-serif;
  color: #111111;
  overflow-x: hidden;
}

/* =========================
   FEE FOOTNOTES
========================= */

.fee-mark {
  margin-left: 1px;
  color: #4b63c6;
  font-weight: 700;
}

/* Deliberately small: a footnote under a fee table, not a warning. */
.policy-content .fee-footnote {
  margin: -12px 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

/* =========================
   OFFER CALLOUT
========================= */

/* Lifts the introductory rate out of the fee tables on the pricing page,
   using the same badge and blue as the promotion on the booking page so the
   two read as one offer. */
.offer-callout {
  margin: 0 0 26px;
  padding: 22px 26px;
  border: 1px solid #cfdcff;
  border-left: 4px solid #3559e0;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef3ff 0%, #f9fbff 100%);
  box-shadow: 0 10px 26px rgba(21, 34, 84, 0.06);
}

.offer-callout-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #3559e0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.policy-content .offer-callout p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #1d2433;
}

.offer-callout-amount {
  color: #3559e0;
  font-size: 1.2em;
  font-weight: 700;
}

/* =========================
   PROTECTED CONTACT DETAILS
========================= */

/* Rendered as buttons because the email address and the phone number are
   only decoded when someone actually activates them. Styled to sit inside
   body copy and footer lists without looking like form controls. */
.protected-email,
.protected-phone,
.protected-sms {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.protected-email:hover,
.protected-phone:hover,
.protected-sms:hover {
  color: #9b59b6;
}

/* =========================
   ACCESSIBILITY
========================= */

/* Skip link: hidden until focused via keyboard. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: #4b63c6;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* Clear focus indicator for keyboard users. */
:focus-visible {
  outline: 3px solid #3559e0;
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

.container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================
   HEADER
========================= */

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding-top: 40px;
}

.header-wrapper {
  display: flex;
  align-items: center;
}

/* HEADER RIGHT AREA */

.header-right {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.logo img {
  width: 170px;
  display: block;
}

.nav {
  display: flex;
  gap: 42px;
}

.nav a {
  text-decoration: none;
  color: #111111;
  font-size: 17px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav a:hover {
  color: #9b59b6;
}

.header-btn {
  background: #4b63c6;
  color: white;
  text-decoration: none;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
}

.header-btn span,
.hero-btn-primary span {
  position: relative;
  top: -2px;
}

.logo img {
  width: 140px;
  display: block;
}

/* =========================
   HERO SECTION
========================= */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 980px;
  padding-top: 240px;
}

/* HERO BACKGROUND IMAGE */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* HERO CONTENT */

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-content {
  width: 760px;
  padding-top: 80px;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
}

.hero-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #4b63c6;
  border-radius: 50%;
  display: inline-block;
}

.hero-content h1 {
  margin-bottom: 26px;
  font-size: 68px;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -2px;
  color: #050505;
}

.hero-content p {
  max-width: 360px;
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;
  color: #111111;
}

/* HERO BUTTONS */

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 30px;
}

.hero-btn-primary {
  background: #4b63c6;
  color: #ffffff;
  text-decoration: none;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
}

.hero-btn-secondary {
  color: #111111;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.hero-btn-secondary span {
  position: relative;
  top: 2px;
  left: 3px;
}

/* =========================
   MOBILE MENU BUTTON
========================= */

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.mobile-menu-btn img {
  width: 26px;
  display: block;
}

/* =========================
   ABOUT SECTION
========================= */

.about {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  background: #ffffff;
  padding-top: 0;
  padding-bottom: 0px;
}

/* ABOUT IMAGE */

.about-image {
  width: 100%;
  height: auto;
  line-height: 0;
}

.about-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
  display: block;
}

/* ABOUT CONTENT */

.about-content {
  max-width: 680px;
  padding-left: 90px;
  padding-right: 40px;
}

.about-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #111111;
}

.about-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #3559e0;
  border-radius: 50%;
}

.about-content h2 {
  margin-bottom: 34px;
  font-size: 51px;
  line-height: 0.98;
  letter-spacing: -2px;
  font-weight: 500;
  color: #111111;
}

.about-content p {
  margin-bottom: 28px;
  font-size: 18px;
  line-height: 1.65;
  color: #111111;
}

/* ABOUT BUTTON */

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  background: #4b63c6;
  color: #ffffff;
  text-decoration: none;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
}

.about-btn span {
  position: relative;
  top: -2px;
}

/* =========================
   WHAT WE OFFER SECTION
========================= */

.what-we-offer {
  padding-top: 120px;
  padding-bottom: 140px;
  background: #ffffff;
}

/* SECTION HEADER */

.section-header {
  max-width: 720px;
  margin: 0 auto 70px;
  text-align: center;
}

.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
  color: #111111;
}

.section-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #3559e0;
  border-radius: 50%;
}

.section-header h2 {
  margin-bottom: 24px;
  font-size: 51px;
  line-height: 1.02;
  letter-spacing: -1.8px;
  font-weight: 500;
  color: #111111;
}

.section-header p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.5;
  color: #111111;
}

/* OFFER GRID */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px 56px;
  max-width: 1120px;
  margin: 0 auto;
}

/* OFFER CARD */

.offer-card {
  overflow: hidden;
  border-radius: 12px;
  background: #4b63c6;
}

/* Cards that link to a service page */
a.offer-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.offer-card:hover,
a.offer-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(75, 99, 198, 0.28);
}

.offer-card img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  display: block;
}

.offer-card-content {
  min-height: 205px;
  padding: 30px 34px 34px;
  background: #4b63c6;
  color: #ffffff;
}

.offer-card-content h3 {
  margin-bottom: 18px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
}

.offer-card-content p {
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

/* =========================
   SEE A DOCTOR SECTION
========================= */

.see-doctor {
  position: relative;
  min-height: 720px;
  padding-top: 180px;
  padding-bottom: 160px;
  background-image:
    linear-gradient(
      90deg,
      rgba(75, 99, 198, 0.96) 0%,
      rgba(75, 99, 198, 0.88) 36%,
      rgba(75, 99, 198, 0.42) 62%,
      rgba(75, 99, 198, 0.05) 100%
    ),
    url("../images/seeadoctor-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* SEE DOCTOR CONTENT */

.see-doctor-content {
  max-width: 620px;
  color: #ffffff;
}

/* SEE DOCTOR LABEL */

.see-doctor-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.see-doctor-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
}

/* SEE DOCTOR TITLE */

.see-doctor-content h2 {
  margin-bottom: 30px;
  font-size: 51px;
  line-height: 1.02;
  letter-spacing: -1.8px;
  font-weight: 500;
  color: #ffffff;
}

/* SEE DOCTOR TEXT */

.see-doctor-content p {
  max-width: 620px;
  margin-bottom: 54px;
  font-size: 18px;
  line-height: 1.55;
  color: #ffffff;
}

/* SEE DOCTOR BUTTON */

.see-doctor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  padding: 18px 34px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.see-doctor-btn span {
  position: relative;
  top: -2px;
}

.see-doctor-btn:hover {
  background: #9b59b6;
  border-color: #9b59b6;
}

/* =========================
   STAY AHEAD SECTION
========================= */

.stay-ahead {
  padding-top: 120px;
  padding-bottom: 140px;
  background: #ffffff;
}

/* STAY AHEAD WRAPPER */

.stay-ahead-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 100px;
  max-width: 1120px;
  margin: 80px auto 0;
}

/* STAY AHEAD IMAGE */

.stay-ahead-image img {
  width: 100%;
  display: block;
  border-radius: 18px;
}

/* STAY AHEAD CONTENT */

.stay-ahead-content {
  max-width: 560px;
}

.stay-ahead-content h3 {
  margin-bottom: 28px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: #111111;
}

.stay-ahead-content p {
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: #111111;
}

/* STAY AHEAD BUTTON */

.stay-ahead-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  background: #4b63c6;
  color: #ffffff;
  text-decoration: none;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.stay-ahead-btn span {
  position: relative;
  top: -2px;
}

.stay-ahead-btn:hover {
  background: #9b59b6;
}

/* =========================
   GET STARTED SECTION
========================= */

.get-started {
  position: relative;
  min-height: 650px;
  padding-top: 150px;
  padding-bottom: 150px;
  background-image: url("../images/getstarted-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* GET STARTED CONTENT */

.get-started-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
}

/* GET STARTED LABEL */

.get-started-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.get-started-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
}

/* GET STARTED TITLE */

.get-started-content h2 {
  margin-bottom: 28px;
  font-size: 68px;
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 500;
  color: #ffffff;
}

/* GET STARTED TEXT */

.get-started-content p {
  margin-bottom: 54px;
  font-size: 20px;
  line-height: 1.5;
  color: #ffffff;
}

/* GET STARTED BUTTON */

.get-started-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  padding: 18px 38px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.get-started-btn span {
  position: relative;
  top: -2px;
}

.get-started-btn:hover {
  background: #9b59b6;
  border-color: #9b59b6;
}

/* =========================
   FOOTER
========================= */

.footer {
  padding-top: 110px;
  padding-bottom: 60px;
  background: #eceff6;
}

/* FOOTER TOP */

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 120px;
  margin-bottom: 100px;
}

/* FOOTER BRAND */

.footer-brand {
  max-width: 360px;
}

.footer-brand img {
  width: 170px;
  margin-bottom: 34px;
}

.footer-brand p {
  font-size: 16px;
  line-height: 1.3;
  color: #111111;
}

/* FOOTER LINKS */

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 70px;
}

/* FOOTER COLUMN */

.footer-column h4 {
  margin-bottom: 28px;
  font-size: 17px;
  font-weight: 600;
  color: #111111;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: #111111;
  white-space: nowrap;
}

.footer-column ul li a {
  color: #111111;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-column ul li a:hover {
  color: #9b59b6;
}

/* FOOTER BOTTOM */

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-top: 40px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.footer-bottom p {
  font-size: 14px;
  color: #111111;
}

/* FOOTER SOCIAL */

.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social a {
  font-size: 15px;
  color: #111111;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #9b59b6;
}

.footer-social span {
  color: #111111;
}

/* =========================
   MOBILE DROPDOWN MENU
========================= */

.mobile-menu {
  display: none;
}

.mobile-menu a {
  color: #111111;
  text-decoration: none;
}

/* =========================
   MEDIA QUERIES TABLET RESPONSIVE
========================= */

/* The navigation carries six entries now, so it starts tightening earlier
   than the rest of the layout does. */
@media (max-width: 1200px) {
  .nav {
    gap: 28px;
  }

  .nav a {
    font-size: 16px;
  }

  .logo img {
    width: 150px;
  }

  .header-right {
    gap: 22px;
  }
}

@media (max-width: 1024px) {
  /* HEADER */

  .header {
    padding-top: 30px;
  }

  .logo img {
    width: 140px;
  }

  .nav {
    gap: 24px;
  }

  .nav a {
    font-size: 15px;
  }

  .header-btn {
    padding: 16px 24px;
    font-size: 14px;
  }

  /* HERO */

  .hero {
    min-height: auto;
    padding-top: 180px;
    padding-bottom: 120px;
  }

  .hero-content {
    width: 100%;
    max-width: 560px;
    padding-top: 40px;
  }

  .hero-content h1 {
    font-size: 72px;
    line-height: 0.95;
  }

  .hero-content p {
    max-width: 420px;
    font-size: 18px;
  }

  /* HERO BACKGROUND */

  .hero-bg {
    width: 100%;
  }

  .hero-bg img {
    object-position: 72% center;
    opacity: 0.5;
  }

  /* ABOUT */

  .about {
    grid-template-columns: 1fr;
    padding-bottom: 90px;
  }

  .about-image {
    width: 100%;
  }

  .about-content {
    max-width: 720px;
    padding: 70px 40px 0;
  }

  .about-content h2 {
    font-size: 56px;
  }

  /* WHAT WE OFFER */

  .offer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 760px;
  }

  .section-header h2 {
    font-size: 46px;
  }

  /* SEE A DOCTOR */

  .see-doctor {
    min-height: 620px;
    padding-top: 140px;
    padding-bottom: 130px;
    background-position: 62% center;
  }

  .see-doctor-content h2 {
    font-size: 50px;
  }

  .see-doctor-content p {
    max-width: 560px;
  }

  /* STAY AHEAD */

  .stay-ahead {
    padding-top: 100px;
    padding-bottom: 110px;
  }

  .stay-ahead-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
    max-width: 720px;
    margin-top: 60px;
  }

  .stay-ahead-content {
    max-width: 100%;
  }

  /* GET STARTED */

  .get-started {
    min-height: 560px;
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .get-started-content h2 {
    font-size: 56px;
  }

  .get-started-content p {
    font-size: 18px;
  }

  /* FOOTER */

  .footer-top {
    flex-direction: column;
    gap: 60px;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }

  /* WHAT WE OFFER */

  .what-we-offer {
    background: #eceff6;
  }
}

/* =========================
   MEDIA QUERIES MOBILE RESPONSIVE
========================= */

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }

  /* HEADER */

  .header {
    padding-top: 24px;
  }

  .header-wrapper {
    align-items: center;
    justify-content: space-between;
  }

  .logo img {
    width: 130px;
  }

  .header-right {
    display: none;
  }

  /* MOBILE HERO ALIGNMENT */

  .hero-label {
    justify-content: center;
  }

  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  /* HERO */

  .hero {
    min-height: auto;
    padding-top: 190px;
    padding-bottom: 90px;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    padding-top: 70px;
    margin: 0 auto;
    text-align: center;
  }

  .hero-label {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .hero-content h1 {
    font-size: 48px;
    line-height: 0.98;
    letter-spacing: -2px;
    margin-bottom: 22px;
  }

  .hero-content p {
    max-width: 330px;
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 32px;
  }

  .hero-buttons {
    gap: 22px;
  }

  .hero-btn-primary {
    padding: 15px 24px;
    font-size: 14px;
  }

  .hero-btn-secondary {
    font-size: 14px;
  }

  /* HERO BACKGROUND */

  .hero-bg img {
    object-position: 68% center;
    opacity: 0.42;
  }

  /* ABOUT */

  .about {
    grid-template-columns: 1fr;
    padding-bottom: 70px;
  }

  .about-content {
    max-width: 100%;
    padding: 55px 24px 0;
    text-align: center;
  }

  .about-label {
    justify-content: center;
  }

  .about-content h2 {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.6px;
  }

  .about-content p {
    font-size: 16px;
    line-height: 1.55;
  }

  .about-btn {
    margin-top: 12px;
  }

  /* WHAT WE OFFER */

  .what-we-offer {
    padding-top: 80px;
    padding-bottom: 90px;
  }

  .section-header {
    margin-bottom: 50px;
  }

  .section-header h2 {
    font-size: 38px;
    line-height: 1.05;
  }

  .section-header p {
    font-size: 15px;
  }

  .offer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 420px;
  }

  .offer-card img {
    height: 220px;
  }

  .offer-card-content {
    min-height: auto;
    padding: 26px 28px 30px;
  }

  .offer-card-content h3 {
    font-size: 20px;
  }

  .offer-card-content p {
    font-size: 15px;
  }

  /* SEE A DOCTOR */

  .see-doctor {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 90px;
    background-image:
      linear-gradient(
        90deg,
        rgba(75, 99, 198, 0.94) 0%,
        rgba(75, 99, 198, 0.88) 100%
      ),
      url("../images/seeadoctor-bg.jpg");
    background-position: center;
  }

  .see-doctor-content {
    max-width: 100%;
    text-align: center;
  }

  .see-doctor-label {
    justify-content: center;
  }

  .see-doctor-content h2 {
    font-size: 40px;
    line-height: 1.05;
  }

  .see-doctor-content p {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
  }

  .see-doctor-btn {
    padding: 15px 28px;
  }

  /* STAY AHEAD */

  .stay-ahead {
    padding-top: 80px;
    padding-bottom: 90px;
  }

  .stay-ahead-wrapper {
    gap: 42px;
    margin-top: 50px;
  }

  .stay-ahead-content {
    text-align: center;
  }

  .stay-ahead-content h3 {
    font-size: 22px;
  }

  .stay-ahead-content p {
    font-size: 16px;
  }

  .stay-ahead-btn {
    padding: 15px 28px;
  }

  /* GET STARTED */

  .get-started {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .get-started-content h2 {
    font-size: 42px;
    line-height: 1.05;
  }

  .get-started-content p {
    font-size: 16px;
  }

  .get-started-btn {
    padding: 15px 28px;
  }

  /* FOOTER */

  .footer {
    padding-top: 80px;
    padding-bottom: 45px;
  }

  .footer-brand {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .footer-brand img {
    width: 145px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* MOBILE DROPDOWN MENU */

  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    margin-top: 18px;
    padding: 24px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    z-index: 999;
  }

  .mobile-menu.active {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .mobile-menu a {
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .mobile-menu a:hover {
    color: #9b59b6;
  }

  .mobile-menu-cta {
    margin-top: 8px;
    padding: 14px 22px;
    background: #4b63c6;
    color: #ffffff !important;
    border-radius: 999px;
    text-align: center;
  }

  .mobile-menu-cta:hover {
    background: #9b59b6;
  }

  /* WHAT WE OFFER */

  .what-we-offer {
    background: #eceff6;
  }
}

/* =========================
   MEDIA QUERIES SMALL MOBILE RESPONSIVE
========================= */

@media (max-width: 480px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .header {
    padding-top: 18px;
    position: relative;
  }

  .logo img {
    width: 105px;
  }

  .hero {
    padding-top: 120px;
    padding-bottom: 70px;
    min-height: 560px;
  }

  .hero-content h1 {
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1.4px;
  }

  .hero-content p {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-buttons {
    gap: 14px;
  }

  .hero-btn-primary {
    padding: 13px 20px;
    font-size: 12px;
  }

  .hero-btn-secondary {
    font-size: 12px;
  }

  .hero-bg img {
    object-position: 64% center;
    opacity: 0.34;
  }

  /* ABOUT */

  .about-content {
    padding: 45px 18px 0;
  }

  .about-content h2 {
    font-size: 34px;
  }

  .about-content p {
    font-size: 14px;
  }

  .about-btn {
    padding: 14px 24px;
    font-size: 13px;
  }

  /* WHAT WE OFFER */

  .section-header h2 {
    font-size: 32px;
  }

  .offer-card img {
    height: 200px;
  }

  .offer-card-content {
    padding: 24px;
  }

  .offer-card-content p {
    font-size: 14px;
  }

  /* SEE A DOCTOR */

  .see-doctor {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .see-doctor-content h2 {
    font-size: 32px;
  }

  .see-doctor-content p {
    font-size: 14px;
  }

  .see-doctor-btn {
    padding: 14px 24px;
    font-size: 13px;
  }

  /* STAY AHEAD */

  .stay-ahead {
    padding-top: 70px;
    padding-bottom: 75px;
  }

  .stay-ahead-wrapper {
    gap: 34px;
    margin-top: 42px;
  }

  .stay-ahead-content h3 {
    font-size: 20px;
  }

  .stay-ahead-content p {
    font-size: 14px;
  }

  .stay-ahead-btn {
    padding: 14px 24px;
    font-size: 13px;
  }

  /* GET STARTED */

  .get-started {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .get-started-label {
    font-size: 14px;
  }

  .get-started-content h2 {
    font-size: 34px;
  }

  .get-started-content p {
    font-size: 14px;
  }

  .get-started-btn {
    padding: 14px 24px;
    font-size: 13px;
  }

  /* FOOTER */

  .footer {
    padding-top: 65px;
  }

  .footer-brand p,
  .footer-column ul li {
    font-size: 14px;
  }

  .footer-column h4 {
    font-size: 16px;
  }

  .footer-bottom p,
  .footer-social a {
    font-size: 13px;
  }

  /* WHAT WE OFFER */

  .what-we-offer {
    background: #eceff6;
  }
}

/* =========================
   BUTTON HOVER EFFECT
========================= */

.header-btn,
.hero-btn-primary,
.about-btn {
  transition: all 0.3s ease;
}

.header-btn:hover,
.hero-btn-primary:hover,
.about-btn:hover {
  background: #9b59b6;
}

/* =========================
   POLICY PAGE
========================= */

/* Solid header for pages without a hero behind it. */
.header-solid {
  position: relative;
  background: #ffffff;
  padding-bottom: 30px;
  border-bottom: 1px solid #eceff6;
}

.policy {
  padding: 80px 0 110px;
}

.policy-content {
  max-width: 820px;
  margin: 0 auto;
}

.policy-content h1 {
  margin-bottom: 36px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -1.6px;
  font-weight: 500;
  color: #111111;
}

.policy-content p {
  margin-bottom: 22px;
  font-size: 18px;
  line-height: 1.65;
  color: #333333;
}

.policy-content p:last-child {
  margin-bottom: 0;
}

.policy-subtitle {
  margin-bottom: 36px;
  font-size: 15px;
  color: #777777;
}

.policy-content h2 {
  margin: 40px 0 16px;
  font-size: 24px;
  letter-spacing: -0.6px;
  font-weight: 600;
  color: #111111;
}

.policy-content h3 {
  margin: 28px 0 12px;
  font-size: 19px;
  font-weight: 600;
  color: #111111;
}

.policy-content ul {
  margin: 0 0 22px 22px;
  padding: 0;
}

.policy-content li {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.65;
  color: #333333;
}

.policy-content a {
  color: #4b63c6;
  word-break: break-word;
}

.policy-content a.about-btn,
.policy-content a.about-btn span {
  color: #ffffff;
}

.policy-content table {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: collapse;
  font-size: 16px;
  color: #333333;
}

.policy-content th,
.policy-content td {
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  text-align: left;
  vertical-align: top;
}

.policy-content th {
  background: #f4f6fb;
  font-weight: 600;
}

.policy-toc a {
  display: block;
  margin-bottom: 6px;
}

/* ABOUT / BIO PAGE PHOTO */
.about-bio-photo {
  float: right;
  width: 270px;
  max-width: 42%;
  margin: 4px 0 24px 36px;
}

.about-bio-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.14);
}

.about-bio-photo figcaption {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  text-align: center;
}

.about-bio-photo figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  color: #777777;
}

@media (max-width: 768px) {
  .policy {
    padding: 50px 0 70px;
  }

  .policy-content h1 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .policy-content p {
    font-size: 16px;
  }

  .about-bio-photo {
    float: none;
    width: 220px;
    max-width: 70%;
    margin: 0 auto 28px;
  }
}

/* =========================
   HEADER BREAKPOINT
========================= */

/* The nav gained an "Insurance and Pricing" entry, which stops fitting
   between the logo and the booking button well before the old 768px
   handover. Hand the header to the mobile menu earlier, and carry the
   dropdown's own styling with it: it lives in the 768px block, which is
   too broad to move because it lays out the whole page. */
@media (max-width: 960px) {
  .header-right {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }
  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    margin-top: 18px;
    padding: 24px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    z-index: 999;
  }
  .mobile-menu.active {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .mobile-menu a {
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  .mobile-menu a:hover {
    color: #9b59b6;
  }
  .mobile-menu-cta {
    margin-top: 8px;
    padding: 14px 22px;
    background: #4b63c6;
    color: #ffffff !important;
    border-radius: 999px;
    text-align: center;
  }
  .mobile-menu-cta:hover {
    background: #9b59b6;
  }
}

/* ==========================================================================
   HEALTH NOTES
   ========================================================================== */

.note-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}

.note-card {
  margin: 0;
  padding: 30px 32px;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.note-card:hover {
  border-color: #cdd5f0;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.06);
}

.note-card .note-date {
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8a8a8a;
}

.note-card h2 {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  font-weight: 600;
}

.note-card h2 a {
  color: #111111;
  text-decoration: none;
}

.note-card h2 a:hover {
  color: #4b63c6;
}

.note-card p {
  margin-bottom: 16px;
  font-size: 17px;
  color: #555555;
}

.note-more {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #4b63c6;
  text-decoration: none;
}

.note-more:hover {
  text-decoration: underline;
}

.note-empty {
  padding: 30px 32px;
  border: 1px dashed #dcdcdc;
  border-radius: 16px;
  color: #666666;
}

.note-lead {
  margin-bottom: 28px;
  font-size: 20px !important;
  line-height: 1.6;
  color: #444444 !important;
}

.note-body {
  padding-top: 6px;
}

.note-body ol {
  margin: 0 0 22px 22px;
  padding: 0;
}

.note-body li {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.65;
  color: #333333;
}

.note-body h2:first-child,
.note-body h3:first-child {
  margin-top: 0;
}

.note-back {
  margin-top: 40px;
  font-size: 16px !important;
}

.note-disclaimer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #ececec;
  font-size: 14px !important;
  line-height: 1.6;
  color: #888888 !important;
}

@media (max-width: 720px) {
  .note-card {
    padding: 24px 22px;
  }

  .note-card h2 {
    font-size: 22px;
  }

  .note-lead {
    font-size: 18px !important;
  }
}