/* Responsive reflow for the Figma composition. The 1920px art-directed frame
   remains untouched above 1600px; smaller screens use real flow layout. */

@media (max-width: 1199px) {
  /* Keep the heading ornament compact in the reflow layout while preserving
     the same rule/V geometry used by the desktop artboard. */
  .heading-mark {
    --mark-line-y: 0px;
    --mark-v-top: 0px;
    --mark-line-height: 2px;
    --mark-v-width: 22px;
    --mark-v-height: 11px;
  }
  .about-copy .heading-mark,
  .services-heading .heading-mark {
    left: auto;
  }
  .about-copy .heading-mark { width: 145px; }
  .services-heading .heading-mark { width: 248px; }
  .heading-mark > i::before,
  .heading-mark > i::after {
    left: calc(50% - 1px);
    width: 2px;
    height: 15px;
  }

  .faq-wave,
  .blog-wave-bottom,
  .story-row h3::before,
  .story-row h3::after {
    display: none;
  }

  body {
    background: var(--bg);
  }

  .stage {
    width: 100%;
    overflow-x: clip;
  }

  .page {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .section {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .fill-img {
    max-width: none;
  }

  .header {
    position: sticky;
    top: 0;
    height: 82px;
    overflow: visible;
    z-index: 30;
  }

  .header-strip {
    height: 10px;
  }

  .search-panel { top: 82px; }

  .nav-shell {
    position: relative;
    inset: auto;
    width: 100%;
    height: 72px;
  }

  .logo {
    left: auto;
    right: clamp(16px, 5vw, 76px);
    top: 11px;
    width: clamp(112px, 11vw, 154px);
    height: auto;
  }

  .nav {
    position: absolute;
    left: auto;
    right: clamp(180px, 19vw, 390px);
    top: 0;
    width: auto;
    height: 72px;
    display: flex;
    align-items: center;
    gap: clamp(2px, 1.2vw, 18px);
    direction: rtl;
  }

  .nav a,
  .nav a:nth-child(n) {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    padding: 9px clamp(5px, 0.8vw, 14px);
    font-size: clamp(14px, 1.55vw, 23px);
    line-height: 1.35;
  }

  .nav-tools {
    position: absolute;
    left: 22px;
    right: auto;
    top: 15px;
    width: 42px;
    height: 42px;
  }

  .language-toggle { left: 76px; top: 17px; width: 54px; height: 38px; padding-inline: 6px; font-size: 13px; }
  .language-flag { width: 18px; height: 12px; }

  .nav-tools .icon-btn {
    top: 0;
  }

  .nav-tools .search-btn {
    left: 0;
  }

  .nav-tools .search-btn img { transform: rotate(180deg); }

  .hero {
    height: clamp(480px, 55vw, 780px);
  }

  .hero-picture,
  .hero-overlay-picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
  }

  .hero-bg,
  .hero-overlay {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero-copy {
    left: 50%;
    top: clamp(30px, 6vw, 80px);
    width: min(782px, calc(100% - 32px));
    transform: translateX(-50%);
  }

  .hero-copy:before {
    width: 100%;
    height: 90%;
  }

  .hero h1 {
    width: 100%;
    margin-left: 0;
    font-size: clamp(31px, 4.1vw, 59px);
    line-height: 1.3;
  }

  .hero p {
    width: min(740px, 100%);
    height: auto;
    min-height: 50px;
    margin-top: 18px;
    padding: 7px 14px;
    font-size: clamp(18px, 2.5vw, 35px);
    line-height: 1.45;
  }

  .section-wave {
    width: 102%;
    height: auto;
    left: -1%;
  }

  .hero-wave,
  .journey-wave,
  .services-wave-top,
  .services-wave-bottom,
  .warning-wave {
    height: clamp(26px, 4vw, 58px);
  }

  .hero-wave,
  .journey-wave,
  .services-wave-bottom {
    bottom: -1px;
  }

  .journey {
    min-height: 620px;
    padding: clamp(52px, 6vw, 76px) clamp(16px, 6vw, 80px) clamp(64px, 7vw, 90px);
  }

  .journey-bg {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .journey-heading,
  .services-heading,
  .team-main-heading,
  .blog-heading,
  .partners-heading,
  .faq-heading {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: min(100%, 900px);
    margin-inline: auto;
    text-align: center;
  }

  .section-heading h2,
  .journey-heading h2,
  .services-heading h2 {
    font-size: clamp(30px, 4vw, 47px);
    line-height: 1.45;
  }

  .section-heading p,
  .journey-heading p,
  .services-heading p {
    width: min(100%, 700px);
    font-size: clamp(17px, 2.1vw, 30px);
    line-height: 1.55;
  }

  .journey-steps {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: clamp(32px, 5vw, 60px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 30px);
    direction: rtl;
  }

  .journey-step {
    width: auto;
    min-width: 0;
  }

  .journey-photo-wrap {
    width: min(100%, 371px);
    height: auto;
    aspect-ratio: 371 / 410;
    margin-inline: auto;
  }

  .journey-photo-wrap img {
    left: 3.8%;
    top: 12.9%;
    width: 92.5%;
    height: auto;
    aspect-ratio: 1;
  }

  .journey-photo-wrap:before,
  .journey-photo-wrap:after {
    left: 0;
    top: 9.5%;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: 2px solid #fff;
  }

  .journey-photo-wrap:after {
    left: 2.2%;
    top: 11.2%;
    width: 95.6%;
  }

  .journey-photo-wrap span {
    left: 50%;
    top: 0;
    width: clamp(54px, 6vw, 78px);
    height: clamp(54px, 6vw, 78px);
    line-height: clamp(54px, 6vw, 78px);
    transform: translateX(-50%);
    font-size: clamp(29px, 3.2vw, 42px);
  }

  .journey-step h3 {
    font-size: clamp(20px, 2.3vw, 30px);
  }

  .journey-arrow,
  .journey-arrowhead {
    display: none;
  }

  .ar-banner,
  .cta {
    left: auto;
    width: calc(100% - 32px);
    margin: clamp(24px, 4vw, 54px) auto;
    border-radius: clamp(16px, 2vw, 28px);
  }

  .ar-banner {
    height: clamp(350px, 44vw, 700px);
  }

  .ar-banner > picture > img,
  .cta > picture > img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .ar-copy {
    right: clamp(22px, 8vw, 100px);
    top: clamp(28px, 5vw, 82px);
    width: min(611px, calc(100% - 44px));
  }

  .ar-copy h2 {
    font-size: clamp(32px, 5vw, 69px);
    line-height: 1.35;
  }

  .ar-copy p {
    width: 100%;
    font-size: clamp(19px, 3vw, 41px);
    line-height: 1.45;
  }

  .ar-copy .pill-btn {
    position: relative;
    left: auto;
    top: auto;
    margin: 22px 0 0;
  }

  .ar-icon {
    left: 22%;
    top: 44%;
    width: clamp(72px, 10vw, 126px);
    height: auto;
  }

  .about {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(24px, 4vw, 70px);
    min-height: 620px;
    padding: clamp(52px, 7vw, 90px) clamp(18px, 6vw, 90px);
  }

  .about-copy,
  .about-art {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .about-copy {
    grid-column: 1;
    text-align: right;
  }

  .about-copy .section-heading {
    position: relative;
    inset: auto;
    width: 100%;
    text-align: right;
  }

  .about-copy .section-heading h2 {
    font-size: clamp(31px, 3.7vw, 45px);
  }

  .about-lead {
    width: 100%;
    margin: 20px 0;
    font-size: clamp(17px, 2vw, 25px);
    line-height: 1.8;
  }

  .vision-item,
  .vision-item:nth-of-type(1),
  .vision-item:nth-of-type(2) {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 22px 0 0;
  }

  .vision-item .round-icon {
    position: relative;
    inset: auto;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
  }

  .round-icon .icon-circle {
    right: 0;
    width: 66px;
    height: 66px;
  }

  .round-icon .vision-glyph,
  .round-icon .mission-glyph {
    right: 3px;
    top: 5px;
    width: 56px;
    height: 56px;
  }

  .vision-item div,
  .vision-item:nth-of-type(1) div {
    position: relative;
    inset: auto;
    width: auto;
  }

  .vision-item h3 {
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.45;
  }

  .vision-item p {
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.8;
  }

  .about-copy .pill-btn {
    position: relative;
    inset: auto;
    float: right;
    margin-top: 24px;
  }

  .about-art {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-height: 320px;
    aspect-ratio: 760 / 671;
  }

  .about-art > img:first-child {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 600px;
    aspect-ratio: 760 / 671;
    object-fit: contain;
    display: block;
  }

  .about-logo {
    left: 13%;
    top: 3%;
    width: 18% !important;
    height: auto !important;
  }

  .about-side-mark {
    left: 72%;
    top: 35%;
    width: 4%;
    height: auto;
  }

  .services {
    padding: clamp(58px, 7vw, 100px) clamp(16px, 6vw, 90px) clamp(70px, 8vw, 120px);
  }

  .services-heading {
    z-index: 3;
  }

  .services-ornament {
    width: 1250px;
    height: auto;
  }

  .services-ornament-top {
    left: -420px;
    top: -190px;
  }

  .services-ornament-bottom {
    left: 25%;
    top: auto;
    bottom: -330px;
  }

  .services-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1700 / 632;
    margin: clamp(30px, 5vw, 64px) auto 0;
    border-radius: clamp(18px, 3vw, 50px);
    z-index: 2;
  }

  .services-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .service-card-grid {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin-top: clamp(22px, 3vw, 42px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: clamp(12px, 1.5vw, 20px);
  }

  .service-card {
    min-width: 0;
    height: auto;
    min-height: 390px;
  }

  .service-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .service-card > picture {
    height: auto;
  }

  .service-card.featured > picture { height: auto; }

  .service-card h3 {
    width: 90%;
    font-size: clamp(17px, 1.65vw, 24px);
  }

  .service-card p {
    width: 88%;
    padding-bottom: 16px;
    font-size: clamp(14px, 1.35vw, 19px);
    line-height: 1.5;
  }

  .service-card.featured {
    min-height: 390px;
  }

  .service-card.featured img { height: auto; aspect-ratio: 1 / 1; }
  /* The desktop featured-card height must not leak into the compact grid. */
  .service-card.featured > picture,
  .service-card.featured > picture img { height: auto !important; }

  .service-card.featured .feature-overlay {
    overflow: auto;
    padding: 18px;
  }

  .service-card.featured h3 {
    white-space: normal;
    font-size: clamp(17px, 1.65vw, 24px);
  }

  .feature-copy,
  .service-card.featured .feature-copy {
    left: 18px;
    right: 18px;
    top: 68px;
    font-size: clamp(15px, 1.45vw, 22px);
    line-height: 1.45;
  }

  .service-card.featured .feature-copy p {
    font-size: inherit;
    line-height: inherit;
  }

  .service-card.featured > .feature-overlay { opacity: 0; visibility: hidden; }

  .service-card:not(.featured) > .feature-overlay { padding: 18px; }
  .service-card:not(.featured) > .feature-overlay h3 { font-size: clamp(17px, 1.65vw, 24px); }
  .service-card:not(.featured) > .feature-overlay .feature-copy { margin-top: 10px; font-size: clamp(15px, 1.45vw, 22px); line-height: 1.45; }

  .team-heading-section {
    padding: 58px 20px 64px;
  }

  .team-main-heading {
    width: min(100%, 905px);
  }

  .team-main-heading p {
    width: 100%;
    font-size: clamp(17px, 2vw, 30px);
  }

  .doctor-one,
  .doctor-two {
    min-height: 760px;
    padding: clamp(44px, 7vw, 90px) clamp(16px, 7vw, 110px);
    background: linear-gradient(to bottom, #ECEEF9 0%, #E4EBF6 100%);
  }

  .doctor-one > picture:not(.doctor-mobile-picture),
  .doctor-two > picture { display: none; }
  .doctor-one,
  .doctor-two-copy { display: flex; flex-direction: column; }
  .doctor-one h2,
  .doctor-two-copy h2 { order: 1; }
  .doctor-mobile-image { display: block; order: 2; width: min(100%, 390px); height: clamp(240px, 66vw, 290px); margin: 0 auto 18px; object-fit: cover; object-position: center center; }
  .doctor-mobile-picture { display: contents; }
  .doctor-one .doctor-mobile-image { object-position: center center; }
  .doctor-two .doctor-mobile-image { object-position: center center; }
  .doctor-one .doctor-box,
  .doctor-two-copy .doctor-box { order: 3; }

  .doctor-bg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .doctor-one h2,
  .doctor-two-copy,
  .doctor-one .doctor-box {
    position: relative;
    inset: auto;
    right: auto;
    left: auto;
    top: auto;
    width: min(100%, 792px);
    margin-inline-start: auto;
  }

  .doctor-one h2 {
    margin-bottom: 18px;
    font-size: clamp(29px, 4vw, 43px);
    line-height: 1.4;
  }

  .doctor-one .doctor-box {
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 16px;
    padding: 20px;
    font-size: clamp(17px, 2vw, 27px);
    line-height: 1.6;
  }

  .doctor-one .b3 {
    margin-bottom: 0;
  }

  .doctor-one-wave {
    left: -5%;
    bottom: -48px;
    width: 110%;
    height: auto;
  }

  .doctor-two {
    min-height: 650px;
  }

  .doctor-two-copy {
    padding-top: 28px;
  }

  .doctor-two-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(29px, 4vw, 43px);
  }

  .doctor-two-copy .doctor-box {
    height: auto;
    padding: 20px;
    font-size: clamp(17px, 2vw, 27px);
    line-height: 1.6;
  }

  .doctor-two-copy .doctor-box p {
    margin-bottom: 16px;
  }

  .medical-warning {
    min-height: 420px;
    padding: 58px 20px 70px;
  }

  .exact-warning {
    position: relative;
    inset: auto;
    width: min(358px, 70vw);
    height: auto;
    aspect-ratio: 357.378 / 273;
    margin-inline: auto;
  }

  .exact-warning img {
    max-width: none;
  }

  .warning-outline {
    width: 92.75%;
    height: 100%;
  }

  .warning-purple {
    left: 41.2%;
    top: 6.1%;
    width: 58.8%;
    height: auto;
  }

  .warning-dot {
    left: 64.1%;
    top: 56.2%;
    width: 10.2%;
    height: auto;
  }

  .warning-icon .warning-exclamation {
    left: 60.45%;
    right: auto;
    top: 17.29%;
    width: 17.09%;
    height: 39.68%;
  }

  .medical-warning p {
    position: relative;
    inset: auto;
    width: min(100%, 1230px);
    margin: 38px auto 0;
    font-size: clamp(23px, 3.4vw, 43px);
    line-height: 1.55;
  }

  .stories {
    padding: 62px clamp(16px, 6vw, 90px) 78px;
  }

  .stories-title {
    padding-top: 0;
  }

  .stories-title h2 {
    font-size: clamp(29px, 4vw, 48px);
    line-height: 1.4;
  }

  .stories-title p {
    width: 100%;
    font-size: clamp(19px, 2.5vw, 37px);
    line-height: 1.5;
  }

  .story-row,
  .row-a,
  .row-b,
  .row-c,
  .row-d {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 48px;
  }

  .story-row h3 {
    position: relative;
    inset: auto;
    width: 100%;
    margin-bottom: 28px;
    font-size: clamp(24px, 3vw, 39px);
    text-align: center;
  }

  .story-images,
  .story-images.three {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(7px, 1.5vw, 16px);
    align-items: center;
  }

  .story-images.three {
    width: min(100%, 700px);
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-images figure {
    width: 100%;
    height: auto;
    aspect-ratio: 287 / 240;
    border-width: 3px;
  }

  .story-images b {
    top: -19px;
    left: 50%;
    width: clamp(36px, 4vw, 62px);
    height: clamp(36px, 4vw, 62px);
    line-height: clamp(36px, 4vw, 62px);
    transform: translateX(-50%);
    font-size: clamp(20px, 2.2vw, 34px);
  }

  .cta {
    height: clamp(320px, 42vw, 640px);
  }

  .cta-copy {
    right: clamp(24px, 11vw, 186px);
    top: clamp(34px, 9vw, 134px);
  }

  .cta-copy h2 {
    font-size: clamp(25px, 3.3vw, 50px);
    line-height: 1.5;
    margin-bottom: 26px;
  }

  .partners {
    padding: 40px clamp(16px, 6vw, 90px) 64px;
  }

  .partner-grid {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 32px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .partner-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 396 / 273;
  }

  .faq {
    padding: 64px clamp(16px, 6vw, 90px) 76px;
  }

  .accordion {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 32px;
    gap: 12px;
  }

  .faq-item button {
    height: auto;
    min-height: 76px;
    padding: 16px 50px 16px 22px;
    gap: 16px;
    font-size: clamp(18px, 2.5vw, 33px);
    line-height: 1.45;
  }

  .faq-item button i {
    position: absolute;
    right: 22px;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-width: 3px;
  }

  .faq-answer p {
    padding: 0 50px 24px 0;
    font-size: clamp(16px, 2vw, 29px);
    line-height: 1.65;
  }

  .faq-item.open .faq-answer {
    height: auto;
  }

  .blog {
    padding: 54px clamp(16px, 6vw, 90px) 72px;
  }

  .blog-heading p {
    font-size: clamp(17px, 2.2vw, 32px);
    line-height: 1.5;
  }

  .blog-grid {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin-top: 34px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 16px;
  }

  .blog-card {
    min-width: 0;
    min-height: 260px;
  }

  .blog-card > img,
  .blog-card > picture {
    width: 50%;
    height: auto;
    min-height: 100%;
    display: block;
  }

  .blog-card > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .blog-card > div {
    width: 50%;
    padding: 20px 16px;
  }

  .blog-card span {
    font-size: clamp(14px, 1.7vw, 22px);
  }

  .blog-card h3 {
    font-size: clamp(13px, 1.3vw, 18px);
    line-height: 1.55;
  }

  .blog-card p {
    font-size: clamp(11px, 1.1vw, 15px);
    line-height: 1.55;
  }

  .blog-card > div { padding: 20px 16px; }
  .blog-card span { align-self: flex-start; width: auto; height: auto; padding: 5px 9px; margin-right: 0; }
  .blog-card a { width: auto; height: auto; padding: 6px 21px; }

  .contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 34px clamp(16px, 6vw, 90px) 58px;
    background: var(--bg);
    direction: ltr;
  }

  .map-card,
  .contact-card {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 440px;
  }

  .map-card {
    direction: ltr;
  }

  .contact-card {
    direction: rtl;
  }

  .map-card {
    aspect-ratio: 919 / 742;
    min-height: 0;
  }

  .map-overlay {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  .contact-card {
    padding: clamp(28px, 4vw, 47px);
  }

  .contact-card h2 {
    position: relative;
    inset: auto;
    margin-bottom: 28px;
    font-size: clamp(28px, 3.3vw, 43px);
  }

  .contact-detail,
  .contact-address,
  .contact-hours,
  .contact-whatsapp {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    min-height: 76px;
    margin-bottom: 22px;
    padding-right: 58px;
  }

  .contact-detail > img,
  .contact-address > img,
  .contact-hours > img,
  .contact-whatsapp > img {
    right: 0;
    left: auto;
    top: 4px;
  }

  .contact-detail > div {
    position: relative;
    inset: auto;
    right: auto;
    width: 100%;
  }

  .contact-detail strong {
    font-size: clamp(20px, 2.4vw, 35px);
    line-height: 1.45;
  }

  .contact-detail p {
    white-space: normal;
    font-size: clamp(16px, 1.8vw, 27px);
    line-height: 1.55;
  }

  .footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    min-height: 390px;
    padding: 50px clamp(18px, 7vw, 120px) 54px;
  }

  .footer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .footer-brand,
  .footer-links,
  .footer-contact,
  .footer-social {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
  }

  .footer-brand {
    grid-column: 1;
  }

  .footer-brand img {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 280px);
    height: auto;
    margin: 0;
  }

  .footer-brand p {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 16px;
    font-size: clamp(15px, 1.6vw, 21px);
    line-height: 1.55;
  }

  .footer-links {
    grid-column: 2;
  }

  .footer-contact {
    grid-column: 3;
    height: auto;
  }

  .footer-social {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    height: auto;
  }

  .footer-social .foot-social-item {
    width: 100%;
    height: 52px;
    display: block;
    border: 0;
    border-radius: 0;
  }

  .foot-social-item span {
    left: auto;
    right: 65px;
    width: auto;
    text-align: right;
  }

  .foot-social-item i {
    left: auto;
    right: 0;
  }

  .footer-contact h3 {
    width: auto;
    margin: 0 0 16px;
    text-align: right;
    font-size: clamp(21px, 2.1vw, 30px);
  }

  .footer-links a,
  .footer-contact a {
    font-size: clamp(16px, 1.6vw, 22px);
  }

  .footer-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 8px;
  }

  .footer-contact-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: 16px;
    gap: 8px;
  }

  .footer-social,
  .footer-contact-grid {
    height: auto;
  }

  .foot-contact-item {
    width: 100%;
    margin-left: 0;
  }

  .foot-contact-item span {
    left: auto;
    right: 65px;
    width: auto;
    text-align: right;
  }

  .foot-contact-item i {
    left: auto;
    right: 0;
  }
}

@media (max-width: 1100px) {
  .nav {
    display: none;
  }

  .menu-toggle {
    position: absolute;
    left: 20px;
    top: 15px;
    display: grid;
    width: 44px;
    height: 44px;
    place-content: center;
    gap: 5px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    z-index: 3;
  }

  .menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 3px;
    background: var(--purple);
    transition: transform .2s ease, opacity .2s ease;
  }

  .nav-open .menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .nav-open .menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-open .nav {
    position: fixed;
    inset: 82px 16px auto 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: auto;
    height: auto;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 35px rgba(47, 75, 108, .2);
  }

  .nav-open .nav a,
  .nav-open .nav a:nth-child(n) {
    width: 100%;
    padding: 12px 14px;
    font-size: 18px;
    text-align: right;
  }

  .journey-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about {
    grid-template-columns: 1fr 1fr;
  }

  .service-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .header {
    height: 76px;
  }

  .search-panel { top: 76px; }

  .nav-shell {
    height: 66px;
  }

  .menu-toggle { left: 16px; }
  .language-toggle { left: 72px; width: 54px; }

  .nav-open .nav {
    inset-block-start: 76px;
  }

  .logo {
    right: 16px;
    top: 10px;
    width: 120px;
  }

  .nav-tools {
    left: 76px;
    top: 12px;
    transform: scale(.9);
    transform-origin: left center;
  }

  .hero {
    height: clamp(470px, 94vw, 680px);
  }

  .hero-copy {
    top: 42px;
  }

  .hero h1 {
    font-size: clamp(28px, 7vw, 44px);
  }

  .hero p {
    font-size: clamp(16px, 4vw, 24px);
  }

  .journey {
    padding-inline: 16px;
  }

  .journey-steps {
    grid-template-columns: 1fr;
    max-width: 390px;
    margin-inline: auto;
  }

  .journey-photo-wrap {
    width: min(52vw, 190px);
  }

  .ar-banner {
    height: clamp(390px, 84vw, 570px);
  }

  .ar-copy {
    right: 20px;
    width: calc(100% - 40px);
    text-align: right;
  }

  .ar-copy h2 {
    font-size: clamp(29px, 8vw, 45px);
  }

  .ar-copy p {
    font-size: clamp(17px, 4.4vw, 25px);
  }

  .ar-copy .pill-btn {
    height: 58px;
    min-width: 190px;
    font-size: 22px;
  }

  .ar-icon {
    left: 10%;
    top: 55%;
  }

  .about {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-inline: 20px;
  }

  .about-art {
    order: -1;
    min-height: 0;
    margin-bottom: 12px;
  }

  .about-copy {
    order: 1;
  }

  .about-side-mark {
    left: 72%;
  }

  .services {
    padding-inline: 16px;
  }

  .services-visual {
    aspect-ratio: 1.65;
  }

  .service-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doctor-one,
  .doctor-two {
    min-height: 0;
    padding-inline: 20px;
  }

  .doctor-bg {
    opacity: .5;
  }

  .doctor-one .doctor-box,
  .doctor-two-copy .doctor-box {
    background: rgba(255, 255, 255, .94);
  }

  .stories {
    padding-inline: 16px;
  }

  .story-images,
  .story-images.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-images figure:nth-child(n+4) {
    grid-column: span 1;
  }

  .story-images figure:last-child:nth-child(5) {
    grid-column: 2;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card {
    min-height: 220px;
  }

  .contact {
    display: flex;
    flex-direction: column;
    padding-inline: 16px;
  }

  .map-card,
  .contact-card {
    min-height: 0;
  }

  .map-card {
    min-height: 300px;
  }

  .footer {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-inline: 22px;
  }

  .footer-brand,
  .footer-links,
  .footer-contact {
    width: min(100%, 360px);
    margin-inline: auto;
  }
}

/* Inline desktop alignment is emitted for the English menu; restore the
   compact mobile drawer behavior when the hamburger opens it. */
@media (max-width: 1100px) {
  body.is-english .nav { display: none !important; }
  body.is-english.nav-open .nav { display: flex !important; position: fixed !important; inset: 82px 16px auto 16px !important; width: auto !important; height: auto !important; flex-direction: column !important; align-items: stretch !important; }
  body.is-english.nav-open .nav a,
  body.is-english.nav-open .nav a:nth-child(n) { position: static !important; width: 100% !important; height: auto !important; padding: 12px 14px !important; font-size: 18px !important; text-align: left !important; }
}

@media (max-width: 480px) {
  .nav-tools {
    display: block;
    left: 22px;
    top: 15px;
    transform: none;
  }

  .hero {
    height: 540px;
  }

  .hero-copy {
    top: 36px;
  }

  .hero h1 {
    font-size: clamp(25px, 7.4vw, 34px);
  }

  .hero p {
    min-height: 0;
    font-size: clamp(15px, 4vw, 20px);
  }

  .footer-social {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .journey-heading p {
    font-size: 17px;
  }

  .about {
    padding-block: 52px 68px;
  }

  .service-card {
    min-height: 340px;
  }

  .service-card.featured {
    min-height: 340px;
  }

  .service-card.featured .feature-overlay {
    padding: 14px;
  }

  .feature-copy,
  .service-card.featured .feature-copy {
    left: 14px;
    right: 14px;
    top: 61px;
    font-size: 13px;
  }

  .service-card h3 {
    font-size: 16px;
  }

  .service-card p {
    font-size: 13px;
  }

  .doctor-one h2,
  .doctor-two-copy h2 {
    font-size: 27px;
  }

  .doctor-one .doctor-box,
  .doctor-two-copy .doctor-box {
    font-size: 16px;
    line-height: 1.75;
  }

  .medical-warning p {
    font-size: 21px;
  }

  .story-images,
  .story-images.three {
    gap: 6px;
  }

  .story-images b {
    top: -14px;
  }

  .faq-item button {
    min-height: 68px;
    padding: 16px 42px 16px 16px;
    font-size: 17px;
  }
  .faq-item button i { right: 16px; }

  .faq-answer p {
    padding-inline: 0 42px;
    font-size: 15px;
  }

  .blog-card > div {
    padding: 16px 12px;
  }

  .blog-card span {
    padding: 5px 9px;
    font-size: 12px;
  }

  .blog-card h3 {
    font-size: 12px;
  }

  .blog-card p {
    font-size: 10px;
  }

  /* Mobile footer rows keep the text centered while every social icon stays
     on the right edge of its centered row. */
  .footer,
  .footer-brand,
  .footer-links,
  .footer-contact,
  .footer-social { text-align: center; }
  .footer-brand img { margin-inline: auto; }
  .footer-brand p { text-align: center; }
  .footer-links h3,
  .footer-contact h3 { text-align: center; }
  .footer-links a { text-align: center; }
  .footer-social { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 270px); margin-inline: auto; }
  .footer-social .foot-social-item { position: relative; display: block !important; width: 100%; height: 52px; text-align: center; direction: ltr; }
  .footer-social .foot-social-item span { position: absolute !important; right: 65px; left: 0; top: 14px; width: auto !important; height: 24px !important; text-align: center; }
  .footer-social .foot-social-item i { position: absolute !important; right: 0; left: auto; top: 0; width: 52px !important; height: 52px !important; flex: 0 0 52px; }
}

/* Hover states use the same image as the card cover so the white default
   content panel never shows through the expanded detail overlay. */
.service-card:hover > picture,
.service-card:focus > picture {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}
.service-card:hover > picture img,
.service-card:focus > picture img { height: 100% !important; object-fit: cover !important; }

/* Latest responsive corrections. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .nav a { padding-inline: .4167vw; }
}

@media (max-width: 800px) {
  /* Center the homepage copy blocks on narrow screens while keeping the
     vision/mission icon on the right edge of its text row. */
  .ar-copy { right: 20px; width: calc(100% - 40px); text-align: center; }
  .ar-copy h2, .ar-copy p { text-align: center; }
  .ar-copy .pill-btn { display: flex; width: max-content; min-width: 160px; margin: 18px auto 0; }
  .cta-copy { right: 20px; width: calc(100% - 40px); text-align: center; }
  .cta-copy h2 { text-align: center; font-size: clamp(21px, 2.9vw, 40px); }
  .cta-copy .pill-btn { display: flex; width: max-content; min-width: 160px; margin: 0 auto; }
  .about-copy, .about-copy .section-heading, .about-copy .section-heading p { text-align: center; }
  .about-copy .section-heading .heading-mark { margin-inline: auto; left: 0; }
  .about-lead { text-align: center; }
  .vision-item, .vision-item:nth-of-type(1), .vision-item:nth-of-type(2) { display: grid; grid-template-columns: 56px minmax(0, 1fr); direction: rtl; align-items: center; gap: 12px; text-align: right; }
  .vision-item .round-icon { grid-column: 1; grid-row: 1; align-self: center; width: 56px; height: 56px; flex: none; }
  .vision-item div, .vision-item:nth-of-type(1) div { grid-column: 2; min-width: 0; text-align: right; }
  .vision-item h3, .vision-item p { text-align: right; }
  .about-copy .pill-btn { display: flex; float: none; width: 150px; min-width: 150px; height: 48px; margin: 18px auto 0; padding: 0; border-width: 5px; outline-offset: 4px; font-size: 20px; }
  .team-heading-section, .team-main-heading, .team-main-heading p { text-align: center; }
  .doctor-one h2, .doctor-two-copy h2 { text-align: center; margin-top: 0; margin-bottom: 10px; }
  .doctor-one .doctor-mobile-image { object-position: center center; }
  .doctor-two .doctor-mobile-image { object-position: center center; }
  .doctor-one, .doctor-two { background: linear-gradient(to bottom, #ECEEF9 0%, #E4EBF6 100%); }
  .faq-item { border-radius: 0; }
  .faq-item button { border-bottom: 1px solid rgba(48,123,195,.25); }
  .faq-item.open button::after { left: 0; right: 0; }
  .faq-answer p { padding: 8px 42px 18px 16px; text-align: right; }
  .service-card.featured > .feature-overlay,
  .service-card:not(.featured) > .feature-overlay { overflow: hidden; padding: 12px; }
  .service-card.featured > .feature-overlay h3,
  .service-card:not(.featured) > .feature-overlay h3 { max-width: 100%; font-size: clamp(11px, 3.4vw, 18px); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .service-card.featured > .feature-overlay .feature-copy,
  .service-card:not(.featured) > .feature-overlay .feature-copy { top: auto; left: 12px; right: 12px; margin-top: 7px; font-size: clamp(11px, 2.8vw, 15px); line-height: 1.35; }
  .service-card.featured > .feature-overlay .feature-copy p,
  .service-card:not(.featured) > .feature-overlay .feature-copy p { margin-bottom: 4px; }
  .footer, .footer-brand, .footer-links, .footer-contact, .footer-social { text-align: center; }
  .footer-links h3,
  .footer-links a { width: 100%; margin-inline: 0; text-align: center; }
  .footer-contact h3 { position: static; width: 100%; height: auto; margin: 0 0 16px; text-align: center; }
  .footer-contact-grid { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 270px); height: auto; margin-inline: auto; }
  .foot-contact-item { position: relative; display: block !important; width: 100%; height: 52px; text-align: center; }
  .foot-contact-item span { position: absolute; left: 0; right: 65px; top: 14px; width: auto; height: 24px; text-align: center; }
  .foot-contact-item i { position: absolute; left: auto; right: 0; top: 0; width: 52px; height: 52px; }
  .footer-social { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 270px); margin-inline: auto; }
  .footer-social .foot-social-item { position: relative; display: block !important; width: 100%; height: 52px; text-align: center; direction: ltr; }
  .footer-social .foot-social-item span { position: absolute; left: 0; right: 65px; top: 14px; width: auto; height: 24px; text-align: center; }
  .footer-social .foot-social-item i { position: absolute; left: auto; right: 0; top: 0; width: 52px; height: 52px; }
}

@media (max-width: 480px) {
  .ar-copy h2 { font-size: clamp(25px, 7vw, 34px); }
  .ar-copy p { font-size: clamp(15px, 4vw, 20px); line-height: 1.55; }
  .ar-copy .pill-btn { min-width: 145px; height: 46px; font-size: 18px; }
  .vision-item { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; }
  .vision-item .round-icon { width: 50px; height: 50px; }
  .round-icon .icon-circle { width: 50px; height: 50px; }
  .round-icon .vision-glyph, .round-icon .mission-glyph { width: 43px; height: 43px; }
  .vision-item h3 { font-size: 21px; }
  .vision-item p { font-size: 14px; line-height: 1.65; }
  .about-copy .pill-btn { width: 138px; min-width: 138px; height: 44px; font-size: 18px; }
  .service-card.featured > .feature-overlay,
  .service-card:not(.featured) > .feature-overlay { padding: 10px; }
  .service-card.featured > .feature-overlay h3,
  .service-card:not(.featured) > .feature-overlay h3 { font-size: 11px; }
  .service-card.featured > .feature-overlay .feature-copy,
  .service-card:not(.featured) > .feature-overlay .feature-copy { left: 10px; right: 10px; margin-top: 5px; font-size: 10px; line-height: 1.28; }
}

.doctor-more {
  display: none;
}

@media (max-width: 800px) {
  .header .nav-tools {
    left: 16px;
    top: 11px;
    width: 104px;
    height: 44px;
    transform: none;
  }

  .header .nav-tools .icon-btn {
    width: 44px;
    height: 44px;
  }

  .header .nav-tools .icon-btn img {
    left: 9.5px;
    top: 9.5px;
  }

  .header .nav-tools .account-btn {
    left: 60px;
  }

  .header .nav-tools-divider {
    left: 52px;
    top: 10px;
  }

  .header .menu-toggle {
    left: 132px;
    top: 11px;
  }

  .journey-photo-wrap {
    width: min(52vw, 190px);
  }

  .service-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card-grid > .service-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
    justify-self: center;
  }

  .service-card:not(.is-expanded) > picture {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  .service-card:not(.is-expanded) > picture img {
    height: auto !important;
  }

  .service-card > .feature-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .service-card.is-expanded {
    grid-column: 1 / -1;
    width: 100% !important;
    height: 520px;
    min-height: 520px;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, .63);
  }

  .service-card.is-expanded > picture,
  .service-card.is-expanded > picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .service-card.is-expanded > .feature-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    overflow: auto;
    padding: 20px;
  }

  .service-card.is-expanded > .feature-overlay h3 {
    max-width: 100%;
    overflow: visible;
    font-size: 16px;
    line-height: 1.45;
    white-space: normal;
    text-overflow: clip;
  }

  .service-card.is-expanded > .feature-overlay .feature-copy {
    left: 20px;
    right: 20px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
  }

  .service-card.is-expanded .featured-cursor {
    display: none;
  }

  .service-card > h3,
  .service-card.featured > h3 {
    font-size: 17px;
  }

  .service-card > p,
  .service-card.featured > p {
    font-size: 14px;
    line-height: 1.55;
  }

  .blog-card {
    min-height: 280px;
  }

  .blog-card h3 {
    font-size: 15px;
  }

  .blog-card p {
    font-size: 14px;
    line-height: 1.55;
  }

  .blog-card span {
    font-size: 13px;
  }

  .blog-card a {
    min-height: 44px;
  }

  .doctor-one:not(.bio-expanded) .b1,
  .doctor-two:not(.bio-expanded) .doctor-box {
    max-height: 310px;
    overflow: hidden;
  }

  .doctor-one:not(.bio-expanded) .b2,
  .doctor-one:not(.bio-expanded) .b3 {
    display: none;
  }

  .doctor-one:not(.bio-expanded) .b1::after,
  .doctor-two:not(.bio-expanded) .doctor-box::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 68px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }

  .doctor-mobile-image {
    height: auto;
    object-fit: contain;
  }

  .doctor.bio-expanded .doctor-box {
    max-height: none;
  }
}

/* English copy needs flexible line boxes where the Arabic artboard used fixed
   single-line dimensions. These overrides preserve the composition while
   preventing translated labels and paragraphs from being clipped. */
body.is-english .pill-btn {
  line-height: 1;
  text-align: center;
}

body.is-english .hero h1,
body.is-english .hero p,
body.is-english .doctor h2,
body.is-english .story-row h3,
body.is-english .contact-detail p,
body.is-english .foot-contact-item,
body.is-english .foot-social-item {
  overflow: visible;
}

body.is-english .contact-detail p {
  white-space: normal;
}

body.is-english .doctor-more {
  font-family: "IBM Plex Sans", Arial, sans-serif;
}

@media (min-width: 1200px) {
  body.is-english .nav a.active::before {
    inset-inline: 0;
  }

  body.is-english .hero h1 {
    width: 100%;
    margin-left: 0;
    font-size: clamp(34px, 2.7vw, 52px);
    line-height: 1.2;
  }

  body.is-english .hero p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 3.2vw;
    padding: .35vw .8vw;
    line-height: 1.3;
  }

  body.is-english .ar-copy h2 {
    font-size: clamp(36px, 3vw, 58px);
    line-height: 1.18;
  }

  body.is-english .ar-copy p {
    width: 100%;
    margin-top: .65vw;
    font-size: clamp(20px, 1.55vw, 30px);
    line-height: 1.38;
  }

  body.is-english .ar-copy .pill-btn {
    position: static;
    width: max-content;
    min-width: 13.5vw;
    height: auto;
    min-height: 3.5vw;
    margin-top: 1.25vw;
    padding: .45vw 1.2vw;
    font-size: clamp(16px, 1.25vw, 24px);
  }

  body.is-english .service-card > h3,
  body.is-english .service-card.featured > h3 {
    font-size: 1.05vw;
    line-height: 1.3;
  }

  body.is-english .service-card > p,
  body.is-english .service-card.featured > p {
    width: 90%;
    font-size: .88vw;
    line-height: 1.35;
  }

  body.is-english .doctor h2 {
    height: auto;
    line-height: 1.2;
  }

  body.is-english .doctor-box,
  body.is-english .doctor-two-copy .doctor-box {
    font-size: 1.16vw;
    line-height: 1.45;
  }

  body.is-english .story-row h3 {
    width: 12.4vw;
    height: auto;
    font-size: 1.55vw;
    line-height: 1.16;
  }

  body.is-english .faq-heading {
    left: 34vw;
    width: 32vw;
  }

  body.is-english .faq-heading h2 {
    white-space: nowrap;
  }

  body.is-english .faq-item button span {
    line-height: 1.3;
  }

  body.is-english .contact-detail p {
    max-width: 100%;
    font-size: 1.1vw;
    line-height: 1.45;
  }

  body.is-english .foot-contact-item span,
  body.is-english .foot-social-item span {
    width: calc(100% - 3.5vw);
  }
}

@media (max-width: 800px) {
  body.is-english .hero p {
    height: auto;
    min-height: 0;
    padding: 6px 10px;
    line-height: 1.35;
  }

  body.is-english .doctor-one h2,
  body.is-english .doctor-two-copy h2,
  body.is-english .story-row h3 {
    height: auto;
    line-height: 1.25;
  }

  body.is-english .contact-detail p {
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/*
 * Figma desktop-proportional range.
 *
 * The source frame is 1920px wide.  A 1536px CSS viewport is the same
 * composition at the user's 125% Windows scale, so every desktop coordinate
 * is expressed as an individual vw dimension.  This keeps the DOM editable
 * and avoids a page-level transform/zoom while the real reflow starts at
 * 1199px and below.
 */
@media (min-width: 1200px) and (max-width: 1599px) {
  body { background: var(--bg); }
  .stage { width: 100%; overflow: hidden; }
  .page {
    width: 100vw;
    height: calc(100vw * 8.285416667);
    min-height: 0;
    overflow: hidden;
  }
  .section { width: 100vw; }

  /* Header 0..128 */
  .header { top: 0; height: 6.6666667vw; }
  .header-strip { height: 1.9323438vw; }
  .nav-shell { top: 1.9323438vw; width: 100vw; height: 4.7343229vw; }
  .logo { left: 88.0208333vw; right: auto; top: .9843229vw; width: 8.0208333vw; height: 3.4375vw; }
  .nav { left: 0; right: auto; top: 0; width: 100vw; height: 4.7343229vw; }
  .nav a { height: 2.135vw; padding: 0; font-size: 1.439739vw; line-height: 2.135vw; }
  .nav a:nth-child(1) { left: 65.613854vw; top: 1.529375vw; width: 6.782vw; height: 2.1645vw; line-height: 2.1645vw; font-size: 1.2472vw; }
  .nav a:nth-child(2) { left: 60.04255vw; width: 4.4271vw; }
  .nav a:nth-child(3) { left: 54.44714vw; width: 4.0104vw; }
  .nav a:nth-child(4) { left: 41.3021vw; width: 11.7708vw; }
  .nav a:nth-child(5) { left: 36.09375vw; width: 3.9583vw; }
  .nav a:nth-child(6) { left: 28.8021vw; width: 6.1458vw; }
  .nav a:nth-child(n+2) { top: 1.529375vw; }
  .nav a.active { height: 2.1645vw; line-height: 2.135vw; padding-inline: .4167vw; }
  .nav-tools { left: 5.208333vw; top: 1.192656vw; width: 6.3021vw; height: 2.0833vw; }
  .language-toggle { left: .8vw; top: 1.35vw; width: 4.1vw; height: 2.15vw; padding-inline: .55vw; font-size: 1vw; }
  .language-flag { width: 1.45vw; height: .98vw; }
  .nav-tools .icon-btn { width: 2.0833vw; height: 2.0833vw; }
  .nav-tools .search-btn { left: 0; }
  .nav-tools .icon-btn img { width: 1.3021vw; height: 1.3021vw; left: .3906vw; top: .3906vw; }
  .nav-tools .search-btn img { width: 1.3021vw; height: 1.3021vw; transform: rotate(180deg); }

  /* Scale the Figma heading ornament offsets with the 1920px artboard. */
  .heading-mark {
    --mark-line-height: .15625vw;
    --mark-v-width: 1.328125vw;
  }
  .heading-mark > i::before,
  .heading-mark > i::after {
    left: calc(50% - .078125vw);
    width: .15625vw;
    height: .9297vw;
  }
  .journey-heading .heading-mark { --mark-line-y: -.119vw; --mark-v-top: -.119vw; --mark-v-height: .5703vw; }
  .about-copy .heading-mark { --mark-line-y: .4066vw; --mark-v-top: .4066vw; --mark-v-height: .6641vw; left: -.3vw; width: 7.4777vw; }
  .services-heading .heading-mark { --mark-line-y: .3708vw; --mark-v-top: .3708vw; --mark-v-height: .6094vw; left: -.2193vw; }
  .team-main-heading .heading-mark { --mark-line-y: .6833vw; --mark-v-top: .6833vw; --mark-v-height: .6094vw; }
  .partners-heading .heading-mark { --mark-line-y: .6849vw; --mark-v-top: .6849vw; --mark-v-height: .6615vw; }
  .faq-heading .heading-mark { --mark-line-y: .3203vw; --mark-v-top: .3203vw; --mark-v-height: .6615vw; }
  .blog-heading .heading-mark { --mark-line-y: .8047vw; --mark-v-top: .8047vw; --mark-v-height: .6875vw; }

  /* Hero 128..1162 */
  .hero { top: 6.6666667vw; height: 53.8541667vw; }
  .hero-bg { inset: 0 !important; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: cover !important; }
  .hero-copy { left: 4.9479167vw; top: 1.8229167vw; width: 40.7291667vw; }
  .hero-copy:before { width: 40.7291667vw; height: 12.0833333vw; border-radius: 7.03125vw; filter: blur(2.8125vw); }
  .hero h1 { width: 38.8020833vw; margin-left: .5729167vw; font-size: 3.080156vw; line-height: 3.8003vw; }
  .hero p { width: 38.5416667vw; height: 3.0729167vw; margin-top: .9375vw; padding-top: .3125vw; border-radius: 1.0416667vw; font-size: 1.8473vw; line-height: 2.2784vw; }
  .section-wave { width: 101.561458vw; height: 3.616667vw; }
  .hero-wave { left: -.78125vw; bottom: -.9604167vw; }

  /* Journey 1162..1992 */
  .journey { top: 60.5208333vw; height: 43.2291667vw; }
  .journey-heading { top: 3.2427083vw; left: 27.2916667vw; width: 45.4166667vw; }
  .journey-heading h2 { font-size: 2.307083vw; line-height: 4.16099vw; }
  .journey-heading p { width: 36.25vw; margin-top: 0; font-size: 1.45104vw; line-height: 2.2276vw; }
  .journey-steps { left: 11.1458333vw; top: 13.9583333vw; width: 77.7604167vw; }
  .journey-step { width: 19.3229167vw; }
  .journey-photo-wrap { width: 19.3229167vw; height: 21.3541667vw; }
  .journey-photo-wrap > picture { width: 100%; height: 100%; }
  .journey-photo-wrap img { left: .7291667vw; top: 2.7604167vw; width: 17.8645833vw; height: 17.8645833vw; }
  .journey-photo-wrap:before { left: 0; top: 2.03125vw; width: 19.3229167vw; height: 19.3229167vw; }
  .journey-photo-wrap:after { left: .4166667vw; top: 2.3958333vw; width: 18.5416667vw; height: 18.5416667vw; }
  .journey-photo-wrap span { left: 7.65625vw; width: 4.0625vw; height: 4.0625vw; line-height: 4.0625vw; font-size: 2.1875vw; }
  .journey-step h3 { font-size: 1.5625vw; }
  .journey-arrow { width: 6.71875vw; height: 1.0123vw; top: 26.224vw; }
  .journey-arrow-1 { left: 61.6927vw; }
  .journey-arrow-2 { left: 32.0052vw; }
  .journey-arrowhead { width: 1.0677vw; height: .7552vw; }
  .journey-arrowhead-1 { left: 61.3021vw; top: 25.9375vw; }
  .journey-arrowhead-2 { left: 31.6667vw; top: 26.4583vw; }
  .journey-wave { left: -.78125vw; bottom: -.023vw; }

  /* AR 2022..2722 and About 2783..3570 */
  .ar-banner { top: 105.3125vw; left: 5.7291667vw; width: 88.5416667vw; height: 36.4583333vw; border-radius: 1.383333vw; }
  .ar-banner:after { right: 2.03125vw; top: 3.3854167vw; width: 37.5520833vw; height: 19.21875vw; filter: blur(2.708333vw); }
  .ar-copy { right: 4.84375vw; top: 4.2708333vw; width: 31.8229167vw; }
  .ar-copy h2 { font-size: 3.58026vw; line-height: 5.4953vw; }
  .ar-copy p { width: 31.8229167vw; font-size: 2.1142vw; line-height: 2.611vw; margin-top: -.2604vw; margin-bottom: 0; }
  .ar-copy .pill-btn { left: 11.5948vw; top: 11.9104vw; height: 4.1146vw; min-width: 14.1146vw; font-size: 1.7005vw; outline-offset: .3646vw; }
  .ar-icon { left: 18.9844vw; top: 11.25vw; width: 6.5625vw; height: 7.0052vw; }
  .about { top: 144.9479167vw; height: 40.9895833vw; }
  .about-copy { left: 5.7291667vw; top: 3.4375vw; width: 42.5520833vw; }
  .about-copy .section-heading h2 { font-size: 2.36745vw; line-height: 3.3912vw; }
  .about-lead { width: 42.34375vw; margin-top: 1.5625vw; font-size: 1.32656vw; line-height: 2.3854vw; }
  .vision-item:nth-of-type(1) { left: 9.2708vw; top: 10.3036vw; width: 33.0729vw; height: 6.4152vw; }
  .vision-item:nth-of-type(2) { left: 7.9167vw; top: 18.2677vw; width: 34.4271vw; height: 6.472vw; }
  .vision-item .round-icon { right: 0; top: 50%; transform: translateY(-50%); width: 3.125vw; height: 3.125vw; }
  .round-icon .icon-circle { right: .1042vw; top: .1042vw; width: 2.9167vw; height: 2.9167vw; }
  .round-icon .vision-glyph { right: .2083vw; top: .3125vw; width: 2.135vw; height: 2.135vw; }
  .round-icon .mission-glyph { right: .1042vw; top: .3646vw; width: 2.5vw; height: 2.5vw; }
  .vision-item div { right: 3.9583vw; width: 28.6458vw; }
  .vision-item:nth-of-type(1) div { width: 27.2917vw; }
  .vision-item h3 { font-size: 1.6651vw; line-height: 2.487vw; }
  .vision-item p { font-size: 1.0057vw; line-height: 1.8646vw; margin-top: .15625vw; }
  .about-copy .pill-btn { right: 0; top: 26.6667vw; width: 7.7083vw; min-width: 7.7083vw; height: 2.2917vw; padding: 0; border-width: .2083vw; outline-offset: .15625vw; font-size: .8333vw; }
  .about-art { left: 54.6875vw; top: 1.3021vw; width: 39.5833vw; height: 34.9479vw; }
  .about-logo { left: 5vw; top: .3125vw; width: 7.1875vw !important; height: 4.3229vw !important; }
  .about-side-mark { left: 36.4323vw; top: 12.0833vw; width: 1.5625vw; height: 5.3125vw; }

  /* Services 3603..6470 */
  .services { top: 187.65625vw; height: 149.3229167vw; }
  .services-heading { top: 4.8958333vw; left: 27.2916667vw; width: 45.4166667vw; }
  .services-heading h2 { font-size: 2.4651vw; line-height: 4.16099vw; }
  .services-heading p { font-size: 1.55104vw; line-height: 2.361vw; }
  .services-heading .heading-mark { width: 13.7929vw; }
  .services-ornament-top, .services-ornament-bottom { width: 126.8852vw; height: 87.0833vw; }
  .services-ornament-top { left: -16.3542vw; top: -7.4479vw; }
  .services-ornament-bottom { left: 11.8229vw; top: 108.75vw; }
  .services-visual { left: 5.7291667vw; top: 14.7395833vw; width: 88.5416667vw; height: 32.9166667vw; border-radius: 2.6041667vw; }
  .services-visual > picture { width: 100%; height: 100%; }
  .service-card-grid { left: 5.7291667vw; top: 50.2083333vw; width: 88.5416667vw; height: 92.2395833vw; grid-template-columns: repeat(4, 21.3255vw); grid-auto-rows: 30.0177vw; column-gap: 1.0797vw; row-gap: 1.0797vw; }
  .service-card { border-radius: 1.0797vw; }
  .service-card > picture { width: 100%; height: 21.1635vw; }
  .service-card img { width: 100%; height: 21.1635vw; }
  .service-card h3 { font-size: 1.22865vw; line-height: 1.777vw; margin-top: .5208vw; }
  .service-card p { font-size: 1.013vw; line-height: 1.3516vw; margin-top: .2083vw; }
  .service-card.featured > picture, .service-card.featured > picture img { height: 21.1635vw; }
  .service-card.featured .feature-overlay { padding: 1.1823vw 1.25vw .78125vw; backdrop-filter: blur(.4427vw); }
  .service-card.featured h3 { font-size: 1.2286vw; line-height: 1.8854vw; }
  .feature-copy { left: 1.25vw; right: 1.25vw; top: 3.474vw; font-size: 1.1693vw; line-height: 1.560vw; }
  .service-card.featured .feature-copy p { font-size: 1.1693vw; line-height: 1.560vw; }
  .feature-copy ul { padding-right: 1.7708vw; }

  /* Team and doctors 6470..8850 */
  .team-heading-section { top: 336.9791667vw; height: 16.09375vw; }
  .team-main-heading { top: 3.4375vw; left: 26.4583333vw; width: 47.1354167vw; }
  .team-main-heading h2 { font-size: 2.4651vw; line-height: 4.16099vw; }
  .team-main-heading p { width: 47.1354167vw; font-size: 1.55104vw; line-height: 2.1615vw; }
  .doctor-one { top: 353.0729167vw; height: 60.1041667vw; }
  .doctor-one > picture, .doctor-two > picture { inset: 0; }
  .doctor-one .doctor-bg { width: 97.1875vw; height: 54.21875vw; left: 2.03125vw; top: 3.8542vw; }
  .doctor h2 { font-size: 2.2421vw; line-height: 3.128vw; }
  .doctor-one h2 { left: 5.7292vw; top: 0; width: 32.1354vw; }
  .doctor-box { border-radius: 1.5625vw; font-size: 1.426vw; line-height: 1.9896vw; }
  .doctor-one .doctor-box { left: 5.7292vw; width: 41.25vw; padding: 1.3021vw 1.6667vw; }
  .doctor-one .b1 { top: 4.5833vw; height: 21.25vw; }
  .doctor-one .b2 { top: 26.71875vw; height: 19.9479vw; }
  .doctor-one .b3 { top: 47.5521vw; height: 7.65625vw; }
  .doctor-one .b1 { padding-top: 1.3542vw; }
  .doctor-one .b2 { padding-top: 1.25vw; padding-bottom: .8333vw; }
  .doctor-one .b3 { padding-top: .78125vw; padding-bottom: .78125vw; }
  .doctor-one-wave { left: -3.3854vw; bottom: -3.3854vw; width: 106.7708vw; height: 22.6042vw; }
  .doctor-one:before, .doctor-one:after { display: none; }
  .doctor-two { top: 414.4270833vw; height: 46.5104167vw; }
  .doctor-two .doctor-bg { object-fit: cover; object-position: bottom; }
  .doctor-two-copy { right: 5.7292vw; top: 10.46875vw; width: 41.25vw; }
  .doctor-two-copy h2 { margin-bottom: 1.875vw; font-size: 2.2421vw; line-height: 3.125vw; }
  .doctor-two-copy .doctor-box { height: 16.4583vw; padding: 1.25vw 1.40625vw; font-size: 1.426vw; line-height: 1.9896vw; }
  .doctor-two:before { display: none; }
  .doctor-two:after { bottom: -3.2292vw; width: 100vw; height: 4.8958vw; }

  /* Warning 8898..9546, stories 9542..11201 */
  .medical-warning { top: 463.4375vw; height: 33.75vw; }
  .warning-wave { left: -.78125vw; top: -.023vw; bottom: auto; width: 101.5615vw; height: 3.59375vw; transform: none; }
  .exact-warning { left: 40.7292vw; top: 3.9583vw; width: 18.6134vw; height: 14.21875vw; }
  .warning-outline { width: 17.265625vw; height: 14.21875vw; }
  .warning-purple { left: 7.6638vw; top: .8659vw; width: 10.9495vw; height: 10.9495vw; }
  .warning-dot { left: 11.9336vw; top: 7.9981vw; width: 1.9043vw; height: 1.9043vw; }
  .warning-icon .warning-exclamation { left: 11.2522vw; right: auto; top: 2.459vw; width: 3.1806vw; height: 5.6422vw; }
  .medical-warning p { left: 17.96875vw; top: 20.7834vw; width: 64.1146vw; font-size: 2.237vw; line-height: 3.2104vw; }
  .stories { top: 497.0vw; height: 86.40625vw; }
  .stories-title { padding-top: 3.4896vw; }
  .stories-title h2 { font-size: 2.4792vw; line-height: 3.4589vw; }
  .stories-title p { width: 31.1458vw; font-size: 1.9036vw; line-height: 2.6557vw; margin-top: .2604vw; }
  .story-row { left: 5.625vw; width: 88.6979vw; height: 13.90625vw; }
  .row-a { top: 14.5833vw; }
  .row-b { top: 32.2396vw; }
  .row-c { top: 49.8958vw; }
  .row-d { top: 67.5521vw; }
  .story-row h3 { top: 4.1667vw; width: 11.4583vw; font-size: 2.03125vw; }
  .story-row h3:after { left: -3.15104vw; width: 2.526vw; height: .1042vw; }
  .story-row h3:before { left: -3.1771vw; top: calc(50% - .2604vw); border-top-width: .2604vw; border-bottom-width: .2604vw; border-right-width: .4167vw; }
  .row-d h3 { font-size: 1.64375vw; }
  .story-images { left: 0; top: 0; width: 75.9896vw; height: 13.90625vw; gap: .3125vw; }
  .story-images figure { border-width: .13446vw; }
  .story-images.three { width: 45.46875vw; left: 30.5208vw; }
  .story-images figure { width: 14.9479vw; height: 12.5vw; border-width: .2083vw; }
  .story-images b { top: -1.5625vw; left: 5.3646vw; width: 3.2292vw; height: 3.2292vw; font-size: 1.7708vw; line-height: 3.2292vw; box-shadow: 0 .4167vw 0 rgba(103,56,136,.14); }

  /* CTA, partners, FAQ, blog, contact and footer */
  .cta { top: 586.71875vw; left: 5.7292vw; width: 88.5417vw; height: 33.3333vw; border-radius: 1.5625vw; }
  .cta:after { right: 2.03125vw; top: 6.09375vw; width: 37.5521vw; height: 14.0625vw; filter: blur(2.7083vw); }
  .cta-copy { right: 3.9583333vw; top: 6.9792vw; }
  .cta-copy h2 { font-size: 2.5818vw; line-height: 3.9615vw; margin-bottom: 1.6667vw; }
  .cta-copy .pill-btn { min-width: 11.4583vw; height: 3.3333vw; font-size: 1.3823vw; }
  .partners { top: 620.0521vw; height: 30.9375vw; }
  .partners-heading { top: 1.5625vw; left: 26.4583vw; width: 47.1354vw; }
  .partners-heading h2 { font-size: 2.4651vw; line-height: 4.16099vw; }
  .partners-heading p { font-size: 1.55104vw; line-height: 2.1615vw; }
  .partner-grid { left: 7.1875vw; top: 13.75vw; width: 85.625vw; grid-template-columns: repeat(4, 20.625vw); gap: 1.0417vw; }
  .partner-grid img { width: 20.625vw; height: 14.21875vw; border-radius: 1.0417vw; box-shadow: 0 0 .625vw rgba(0,0,0,.15); }
  .faq { top: 650.9896vw; height: 59.1146vw; }
  .faq-wave,.blog-wave-bottom { left: -.78125vw; width: 101.5614583vw; height: 3.6166667vw; }
  .faq-wave-top { top: -.075vw; }
  .faq-wave-bottom { bottom: -.23125vw; }
  .faq-heading { top: 3.90625vw; left: 42.7083vw; width: 14.6354vw; }
  .faq-heading h2 { font-size: 2.4651vw; line-height: 4.16099vw; }
  .accordion { left: 6.40625vw; top: 10.78125vw; width: 87.0833vw; gap: 1.1458vw; }
  .faq-item { border-radius: 1.1979vw; }
  .faq-item button { height: 6.4583vw; padding: 0 4.1667vw; font-size: 1.6667vw; line-height: 2.0833vw; }
  .faq-item button i { right: 2.0833vw; width: 1.1979vw; height: 1.1979vw; border-width: .2083vw; }
  .faq-answer p { padding: .2604vw 4.1667vw 1.9792vw 0; font-size: 1.716vw; line-height: 2.7104vw; }
  .faq-item.open button::after { left: 0; right: 0; height: .0521vw; }
  .faq-item.open .faq-answer { height: 5.4167vw; }
  .blog { top: 709.53125vw; height: 54.0625vw; }
  .blog-wave-bottom { bottom: -.2833333vw; }
  .blog-heading { top: 1.5104vw; left: 28.28125vw; width: 43.4375vw; }
  .blog-heading h2 { font-size: 2.4651vw; line-height: 4.16099vw; }
  .blog-heading p { font-size: 1.6667vw; line-height: 2.3271vw; }
  .blog-heading .heading-mark { width: 8.6757vw; }
  .blog-grid { left: 5.7292vw; top: 14.0625vw; width: 88.4896vw; height: 33.8542vw; grid-template-columns: repeat(2, 43.6594vw); grid-template-rows: repeat(2, 16.5417vw); gap: .775vw 1.1719vw; }
  .blog-card { border-radius: .775vw; }
  .blog-card > picture { width: 21.8104vw; height: 100%; }
  .blog-card > div { padding: 2.0521vw 1.5625vw 2.0521vw; width: 21.849vw; display: flex; flex-direction: column; align-items: flex-start; }
  .blog-card span { align-self: flex-start; width: 11.0418vw; height: 2.7552vw; box-sizing: border-box; font-size: 1.1354vw; padding: .5208vw .8333vw; border-radius: .3125vw; margin-right: -1.5625vw; }
  .blog-card h3 { font-size: .760vw; line-height: 1.2208vw; margin: .7292vw 0; }
  .blog-card p { font-size: .643vw; line-height: 1.0229vw; }
  .blog-card a { width: 6.8956vw; height: 2.0507vw; box-sizing: border-box; padding: 0; font-size: .9193vw; align-self: flex-start; margin-top: auto; align-items: center; justify-content: center; }
  .contact { top: 766.9271vw; height: 38.6458vw; }
  .map-card { left: 4.7396vw; top: 0; width: 47.8854vw; height: 38.665vw; border-radius: 1.0417vw; }
  .map-zoom { left: 2.6271vw; bottom: 2.8469vw; gap: .0521vw; }
  .map-zoom button { width: 2.8505vw; height: 2.8505vw; font-size: 2.2805vw; line-height: 2.8505vw; }
  .contact-card { right: 4.7396vw; top: 4.7917vw; width: 37.65625vw; height: 29.1146vw; border-radius: 1.5625vw; }
  .contact-card h2 { right: 3.8542vw; top: 2.4479vw; font-size: 2.2328vw; line-height: 2.7911vw; }
  .contact-detail { left: 3.75vw; width: 30.0521vw; min-height: 5.1042vw; }
  .contact-detail > div { right: 3.3333vw; width: 25.46875vw; }
  .contact-detail strong { font-size: 1.8229vw; line-height: 2.2786vw; }
  .contact-detail p { font-size: 1.3932vw; line-height: 2.1354vw; margin-top: .625vw; }
  .contact-address { top: 7.823vw; }
  .contact-address > img { width: 1.5262vw; height: 2.348vw; right: .3646vw; }
  .contact-hours { top: 14.6745vw; }
  .contact-hours > img, .contact-whatsapp > img { width: 2.2771vw; height: 2.2771vw; }
  .contact-hours > img { right: 0; top: .5729vw; }
  .contact-whatsapp { top: 21.6vw; }
  .contact-whatsapp > img { right: 0; top: .3646vw; }
  .contact-whatsapp p { font-size: 1.2891vw; }
  .footer { top: 808.5417vw; height: 20vw; }
  .footer-brand { left: 69.7854vw; top: 3.2328vw; width: 20.2083vw; height: 10.8854vw; }
  .footer-brand img { position: relative; left: auto; top: auto; width: 11.71875vw; height: 5.0521vw; margin-left: auto; }
  .footer-brand p { position: relative; left: auto; top: auto; width: 20.2083vw; margin-top: .9896vw; font-size: 1.076vw; line-height: 1.599vw; text-align: right; }
  .footer-links { left: 45.7641vw; top: 3.2328vw; width: 8.7611vw; }
  .footer-links h3 { width: 8.6979vw; font-size: 1.546vw; line-height: 2.2vw; }
  .footer-links a { width: 7.7604vw; margin-left: .9896vw; font-size: 1.12vw; line-height: 2.3672vw; }
  .footer-contact { left: 7.2917vw; top: 3.2328vw; width: 23.2119vw; height: 10.3646vw; }
  .footer-contact h3 { width: 100%; height: 2.7055vw; font-size: 1.546vw; line-height: 2.7299vw; }
  .footer-contact-body { width: 100%; height: 6.6667vw; margin-top: .9896vw; gap: 4.53125vw; }
  .footer-social { width: 9.1146vw; height: 6.6667vw; gap: 1.25vw; }
  .footer-contact-grid { width: 9.53125vw; height: 6.6667vw; gap: 1.25vw; }
  .foot-social-item { width: 9.1146vw; }
  .foot-contact-item { width: 9.53125vw; }
  .foot-contact-item,
  .foot-social-item { height: 2.7083vw; flex-basis: 2.7083vw; font-size: 1.1858vw !important; line-height: 2.7083vw !important; }
  .foot-contact-item span,
  .foot-social-item span { top: .7292vw; height: 1.1979vw; line-height: 1.1858vw; }
  .foot-contact-item span { right: 3.5417vw; width: 9.0651vw; }
  .foot-social-item span { right: 3.4896vw; width: 10.6771vw; }
  .foot-contact-item i,
  .foot-social-item i { right: 0; width: 2.7104vw; height: 2.7104vw; border-width: .0847vw; }
}

/* Keep all proportional desktop links padded like the active home pill. */
@media (min-width: 1200px) {
  .nav a { padding-inline: .4167vw; }
  .nav a.active { background: transparent; isolation: isolate; z-index: 0; }
  .nav a.active::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: calc(clamp(5px, .4167vw, 8px) * -1);
    z-index: -1;
    border-radius: inherit;
    background: rgba(48, 123, 195, .15);
    pointer-events: none;
  }
}

/* English layout follows the same art direction with native LTR reading flow. */
html[dir="ltr"] body,
body.is-english {
  direction: ltr;
  font-family: "IBM Plex Sans", Arial, sans-serif;
}

body.is-english .nav,
body.is-english .journey-steps,
body.is-english .service-card-grid,
body.is-english .story-images,
body.is-english .partner-grid,
body.is-english .search-panel {
  direction: ltr;
}

body.is-english .ar-copy,
body.is-english .about-copy,
body.is-english .about-copy .section-heading,
body.is-english .vision-item,
body.is-english .vision-item div,
body.is-english .doctor h2,
body.is-english .doctor-box,
body.is-english .feature-overlay,
body.is-english .feature-copy,
body.is-english .story-row h3,
body.is-english .cta-copy,
body.is-english .faq-item button,
body.is-english .faq-answer p,
body.is-english .blog-card > div,
body.is-english .contact-card,
body.is-english .contact-detail,
body.is-english .contact-detail > div,
body.is-english .footer-brand,
body.is-english .footer-links,
body.is-english .footer-contact {
  direction: ltr;
  text-align: left;
}

body.is-english .hero-copy,
body.is-english .hero-copy h1,
body.is-english .hero-copy p,
body.is-english .section-heading,
body.is-english .journey-step,
body.is-english .service-card,
body.is-english .stories-title,
body.is-english .partners-heading,
body.is-english .team-main-heading,
body.is-english .medical-warning {
  direction: ltr;
  text-align: center;
}

body.is-english .align-right .heading-mark,
body.is-english .about-copy .section-heading .heading-mark {
  margin-inline: 0 auto;
}

body.is-english .vision-item .round-icon {
  left: 0;
  right: auto;
}

body.is-english .vision-item div,
body.is-english .vision-item:nth-of-type(1) div {
  left: 76px;
  right: auto;
}

body.is-english .about-copy .pill-btn {
  left: 0;
  right: auto;
  float: left;
}

body.is-english .service-card.featured > .feature-overlay h3,
body.is-english .service-card:not(.featured) > .feature-overlay h3,
body.is-english .service-card.featured > .feature-overlay .feature-copy,
body.is-english .service-card:not(.featured) > .feature-overlay .feature-copy {
  text-align: left;
}

body.is-english .feature-copy ul {
  padding-right: 0;
  padding-left: 34px;
}

body.is-english .blog-card {
  direction: ltr;
}

body.is-english .blog-card.image-right {
  flex-direction: row-reverse;
}

body.is-english .blog-card.image-left {
  flex-direction: row;
}

body.is-english .blog-card span {
  align-self: flex-start;
  margin-right: 0;
  margin-left: -30px;
}

body.is-english .contact-detail > img {
  left: 0;
  right: auto;
}

body.is-english .contact-detail > div {
  left: 64px;
  right: auto;
}

body.is-english .footer-contact h3 {
  left: 0;
  right: auto;
  text-align: left;
}

body.is-english .footer-contact-grid,
body.is-english .foot-contact-item,
body.is-english .footer-social,
body.is-english .foot-social-item {
  direction: ltr;
}

body.is-english .foot-contact-item span {
  left: 67px;
  right: auto;
  text-align: left;
}

body.is-english .foot-contact-item i {
  left: 0;
  right: auto;
}

body.is-english .foot-social-item span {
  left: 67px;
  right: auto;
  text-align: left;
}

body.is-english .foot-social-item i {
  left: 0;
  right: auto;
}

body.is-english .foot-contact-item,
body.is-english .foot-social-item,
body.is-english .contact-whatsapp p {
  unicode-bidi: isolate;
}

@media (min-width: 1200px) {
  body.is-english .nav {
    left: 25%;
    right: auto;
    top: 0;
    width: 58%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1vw, 20px);
  }

  body.is-english .nav a,
  body.is-english .nav a:nth-child(n) {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 8px clamp(8px, .78vw, 15px) !important;
    font-size: clamp(15px, 1.28vw, 24px) !important;
    line-height: 1.2 !important;
  }

  body.is-english .hero h1 {
    font-size: clamp(35px, 2.85vw, 55px);
    line-height: 1.18;
  }

  body.is-english .hero p {
    font-size: clamp(20px, 1.55vw, 30px);
  }

  body.is-english .footer-links a {
    width: 100%;
    margin-left: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  body.is-english .blog-card span {
    margin-left: -1.5625vw;
  }

  body.is-english .feature-copy ul {
    padding-left: 1.7708vw;
  }
}

@media (min-width: 801px) and (max-width: 1199px) {
  .language-toggle {
    left: 16px;
    top: 16px;
    width: 66px;
    height: 40px;
  }

  .nav-tools {
    left: 94px;
    width: 124px;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .menu-toggle {
    left: 226px;
  }
}

@media (max-width: 1100px) {
  body.is-english.nav-open .nav {
    direction: ltr;
  }
}

@media (max-width: 800px) {
  .language-toggle {
    left: 188px;
    top: 14px;
    width: 58px;
    height: 38px;
    padding-inline: 6px;
    font-size: 13px;
  }

  .language-flag-frame {
    width: 20px;
    height: 13px;
    flex-basis: 20px;
  }

  body.is-english .about-copy,
  body.is-english .about-copy .section-heading,
  body.is-english .about-lead,
  body.is-english .team-heading-section,
  body.is-english .team-main-heading,
  body.is-english .team-main-heading p,
  body.is-english .doctor-one h2,
  body.is-english .doctor-two-copy h2,
  body.is-english .footer-brand,
  body.is-english .footer-brand p,
  body.is-english .footer-links,
  body.is-english .footer-links h3,
  body.is-english .footer-links a,
  body.is-english .footer-contact,
  body.is-english .footer-contact h3 {
    text-align: center;
  }

  body.is-english .about-copy .section-heading .heading-mark {
    margin-inline: auto;
  }

  body.is-english .vision-item,
  body.is-english .vision-item:nth-of-type(1),
  body.is-english .vision-item:nth-of-type(2) {
    direction: ltr;
    grid-template-columns: 56px minmax(0, 1fr);
  }

  body.is-english .vision-item .round-icon {
    grid-column: 1;
  }

  body.is-english .vision-item div,
  body.is-english .vision-item:nth-of-type(1) div {
    position: static;
    grid-column: 2;
    text-align: left;
  }

  body.is-english .blog-card span {
    margin-left: 0;
  }

  body.is-english .contact-detail {
    padding-right: 0;
    padding-left: 58px;
  }

  body.is-english .contact-detail > img,
  body.is-english .contact-detail > div {
    position: static;
  }

  body.is-english .footer-contact-grid,
  body.is-english .foot-contact-item,
  body.is-english .footer-social,
  body.is-english .foot-social-item {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  body.is-english .foot-contact-item span,
  body.is-english .foot-contact-item i,
  body.is-english .foot-social-item span,
  body.is-english .foot-social-item i {
    position: static;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .header .nav-tools {
    left: 8px;
  }

  .header .nav-tools .account-btn {
    left: 56px;
  }

  .header .menu-toggle {
    left: 116px;
  }

  .language-toggle {
    left: 164px;
    width: 50px;
    padding-inline: 4px;
    gap: 4px;
    font-size: 12px;
  }

  .language-flag-frame {
    width: 18px;
    height: 12px;
    flex-basis: 18px;
  }

  .logo {
    right: 12px;
    width: clamp(86px, 28vw, 104px);
  }
}

html[dir="rtl"] .faq,
html[dir="rtl"] .accordion,
html[dir="rtl"] .faq-item,
html[dir="rtl"] .faq-item button,
html[dir="rtl"] .faq-answer,
body.rtl .faq,
body.rtl .accordion,
body.rtl .faq-item,
body.rtl .faq-item button,
body.rtl .faq-answer {
  direction: rtl;
}

html[dir="rtl"] .faq-item button,
body.rtl .faq-item button {
  justify-content: flex-start;
  text-align: right;
  padding-inline: 80px;
}

html[dir="rtl"] .faq-item button span,
body.rtl .faq-item button span {
  display: block;
  flex: 1 1 auto;
  text-align: right;
}

html[dir="rtl"] .faq-item button i,
body.rtl .faq-item button i {
  left: 40px;
  right: auto;
}

html[dir="rtl"] .faq-answer p,
body.rtl .faq-answer p {
  text-align: right;
  padding-inline: 80px;
}

@media (max-width: 700px) {
  html[dir="rtl"] .faq-item button,
  body.rtl .faq-item button {
    padding-inline: 42px 16px;
  }

  html[dir="rtl"] .faq-item button i,
  body.rtl .faq-item button i {
    left: 16px;
    right: auto;
  }

  html[dir="rtl"] .faq-answer p,
  body.rtl .faq-answer p {
    padding-inline: 42px 16px;
  }
}

/* English desktop layout: preserve the artboard while giving translated copy
   enough room to keep the requested reading rhythm. */
@media (min-width: 1200px) {
  body.is-english .hero-copy {
    width: 1100px;
    text-align: left;
  }

  body.is-english .hero-copy::before {
    width: 1100px;
  }

  body.is-english .hero h1 {
    width: 1100px;
    white-space: nowrap;
    text-align: left;
    font-size: clamp(40px, 2.6vw, 50px);
  }

  body.is-english .hero p {
    width: max-content;
    max-width: none;
    white-space: nowrap;
    margin-left: 0;
    margin-right: 0;
    padding: 12px;
    justify-content: flex-start;
    text-align: left;
  }

  body.is-english .about-copy {
    top: 78px;
    text-align: left;
  }

  body.is-english .about-copy .section-heading,
  body.is-english .about-lead,
  body.is-english .vision-item,
  body.is-english .vision-item div {
    text-align: left;
  }

  body.is-english .about-lead {
    margin-bottom: 24px;
  }

  body.is-english .vision-item {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 26px;
    margin-top: 16px;
    padding-left: 0;
    width: 100%;
    height: auto;
    min-height: 100px;
  }

  body.is-english .vision-item:nth-of-type(1),
  body.is-english .vision-item:nth-of-type(2) {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  body.is-english .vision-item .round-icon {
    position: relative;
    inset: auto;
    right: auto;
    top: auto;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    transform: none;
    margin-top: 4px;
  }

  body.is-english .vision-item div,
  body.is-english .vision-item:nth-of-type(1) div {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  body.is-english .about-copy .pill-btn.small {
    position: absolute;
    left: 0;
    right: auto;
    top: 470px;
    float: none;
    display: inline-flex;
    min-width: 0;
    width: max-content;
    margin-top: 0;
    padding-inline: 6px;
  }

  body.is-english .pill-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  body.is-english .stories-title p {
    width: min(900px, calc(100% - 80px));
    max-width: 900px;
    white-space: normal;
  }

  body.is-english .story-row h3 {
    left: 0;
    right: auto;
    text-align: left;
  }

  body.is-english .story-images,
  body.is-english .story-images {
    left: auto;
    right: 0;
    direction: ltr;
  }

  body.is-english .story-images.three {
    left: 250px;
    right: auto;
  }

  body.is-english .story-row h3::after {
    left: auto;
    right: -30px;
  }

  body.is-english .story-row h3::before {
    left: auto;
    right: -30px;
    border-right: 0;
    border-left: 8px solid var(--purple);
  }

  body.is-english .cta-copy {
    left: 4.470588%;
    right: auto;
    text-align: left;
  }

  body.is-english .cta-copy h2 {
    width: 900px;
    white-space: nowrap;
    font-size: clamp(30px, 2.15vw, 42px);
    line-height: 1.35;
  }

  body.is-english .faq-answer p {
    padding-right: 0;
    padding-left: 4.1667vw;
  }

  body.is-english .footer-brand {
    text-align: left;
  }

  body.is-english .footer-brand img {
    left: 193px;
    right: auto;
  }

  body.is-english .footer-brand p {
    left: 161px;
    right: auto;
    text-align: left;
  }

  body.is-english .footer-contact {
    left: auto;
    right: 275px;
  }

  body.is-english .footer-social {
    left: auto;
    right: 80px;
  }
}

@media (max-width: 800px) {
  .footer-brand {
    height: auto;
  }

  .footer-links a {
    line-height: 36px;
  }

  html[dir="rtl"] .contact-detail,
  html[dir="rtl"] .contact-detail > div {
    text-align: right;
  }

  .doctor-two:not(.bio-expanded) .doctor-box::after {
    content: none;
  }

  .service-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card {
    min-height: 0;
  }

  .service-card.is-expanded {
    grid-column: auto;
    width: auto !important;
    height: auto;
    min-height: 0;
  }

  .service-card.is-expanded > picture,
  .service-card.is-expanded > picture img {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
  }
}


/* === Mobile art-directed banners ==========================================
   Below 800px the hero, the AR banner and the CTA are single exported images
   at the ratio they were drawn at, instead of the desktop composition. Both
   languages get the same artwork and the same box: the Arabic export has its
   copy baked in (.mobile-art-ar, so the live copy is hidden and the whole card
   becomes one WhatsApp link), the English export is clean (.mobile-art-en, so
   the live English copy keeps sitting on top of it). The class is printed by
   front-page.php, so nothing here depends on JavaScript having run. */

.section-mobile-art,
.section-mobile-art-img,
.services-visual img.services-visual-mobile { display: none; }

@media (max-width: 800px) {
  /* --- shared: the section takes the artwork's ratio and the artwork fills it */
  .hero.mobile-art-ar,
  .hero.mobile-art-en {
    height: auto !important;
    aspect-ratio: 800 / 1027;
  }

  .ar-banner.mobile-art-ar,
  .ar-banner.mobile-art-en,
  .cta.mobile-art-ar,
  .cta.mobile-art-en {
    height: auto !important;
    min-height: 0 !important;
  }

  .ar-banner.mobile-art-ar,
  .ar-banner.mobile-art-en { aspect-ratio: 800 / 1118; }

  .cta.mobile-art-ar,
  .cta.mobile-art-en { aspect-ratio: 800 / 888; }

  /* The hero swaps through <picture>, so only its box and the wave change --
     the wave is already drawn into both mobile exports. */
  .hero.mobile-art-ar .hero-bg,
  .hero.mobile-art-en .hero-bg {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero.mobile-art-ar .hero-wave,
  .hero.mobile-art-en .hero-wave { display: none !important; }

  /* The AR banner and the CTA swap through a dedicated element, so the desktop
     picture is dropped. Its <img> is lazy, so hidden here it is never fetched. */
  .ar-banner.mobile-art-ar > picture,
  .ar-banner.mobile-art-en > picture,
  .cta.mobile-art-ar > picture,
  .cta.mobile-art-en > picture { display: none !important; }

  .mobile-art-ar .section-mobile-art-img,
  .mobile-art-en .section-mobile-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .mobile-art-en .section-mobile-art-img {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* --- Arabic: the copy is part of the picture ---------------------------- */
  .mobile-art-ar .hero-copy,
  .mobile-art-ar .ar-copy,
  .mobile-art-ar .cta-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    background: none !important;
    filter: none !important;
  }

  /* Those pill buttons would stay keyboard-focusable while invisible, and they
     duplicate the link that now wraps the artwork. */
  .mobile-art-ar .hero-copy:before,
  .mobile-art-ar .ar-copy:before,
  .mobile-art-ar .cta-copy:before,
  .mobile-art-ar .ar-copy .pill-btn,
  .mobile-art-ar .cta-copy .pill-btn,
  .mobile-art-ar .ar-icon,
  .ar-banner.mobile-art-ar:after,
  .cta.mobile-art-ar:after { display: none !important; }

  .mobile-art-ar .section-mobile-art {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    overflow: hidden;
  }

  /* --- English: live copy over the text-free artwork ---------------------- */
  .mobile-art-en .ar-copy,
  .mobile-art-en .cta-copy { z-index: 2; }

  .mobile-art-en .ar-icon { display: none !important; }

  /* The artwork leaves the top clear on the AR banner and the foot of the CTA
     clear, so each block of copy is anchored to its own empty area. */
  .ar-banner.mobile-art-en .ar-copy {
    right: 20px;
    top: 34px;
    width: calc(100% - 40px);
  }

  .cta.mobile-art-en .cta-copy {
    right: 20px;
    top: auto;
    bottom: 34px;
    width: calc(100% - 40px);
  }

  .cta.mobile-art-en:after {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 55%;
  }

  .ar-banner.mobile-art-en:after {
    right: 0;
    left: 0;
    top: 0;
    width: auto;
    height: 45%;
  }

  /* JOURNEY -- the mobile artwork already has the grey wash baked in, so the
     .journey-shade overlay would flatten it back out. journey-bg-mobile.webp
     is the 800x1200 export continued down to 800x2000 (its own bottom pixels
     faded, per column, into the flat wash they were already heading towards),
     so the section can be taller than the artwork without a seam or a crop
     that eats half its width. */
  .journey-shade { display: none; }

  .journey { background-color: #cfcdd6; }

  .journey-bg {
    object-position: center top !important;
  }

  /* The mobile services artwork is portrait (800x1084); the desktop artwork it
     replaces is a 1.65 landscape crop, so the box has to follow the swap. */
  .services-visual { aspect-ratio: 800 / 1084; }
  .services-visual-desktop { display: none !important; }
  .services-visual img.services-visual-mobile {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}