/* top strip + nav */
  .strip { background: var(--navy); color: #DCE4F5; font-size: 13px; }
  .strip .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 16px; }
  .strip a:hover { color: #fff; }
  .strip .langs { display: flex; gap: 14px; align-items: center; }
  .strip .langs b { color: #fff; font-weight: 500; }
  .strip .langs .ku { font-size: 12px; }
  .nav { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
  .nav .wrap { display: flex; align-items: center; height: 84px; gap: 28px; }
  .nav .logo img { height: 56px; width: auto; }
  .nav ul { display: flex; gap: 30px; list-style: none; margin-left: auto; font-weight: 500; font-size: 16px; color: var(--navy); }
  .nav ul a:hover { color: var(--brand); }
  .nav .acts { display: flex; align-items: center; gap: 18px; }
  .nav .signin { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; color: var(--navy); }
  .menu-btn { display: none; }

  /* hero */
  .hero { position: relative; overflow: hidden; }
  .hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; min-height: 680px; padding: 56px 0 72px; }
  .hero h1 { margin-top: 22px; font: 600 clamp(46px, 6vw, 82px)/.98 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.015em; color: var(--brand); }
  .hero .lede { margin-top: 28px; max-width: 520px; }
  .hero .ctas { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
  .hero .points { display: flex; gap: 30px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .hero .points div { display: flex; gap: 12px; align-items: center; font-weight: 500; color: var(--navy); line-height: 1.25; font-size: 15px; }
  .hero .points .ico { color: var(--brand); width: 26px; height: 26px; }
  .hero .visual { position: relative; height: 600px; }
  .hero .photo { position: absolute; inset: 0 -12vw 0 0; border-radius: 300px 0 0 300px; overflow: hidden; }
  .hero .photo img { width: 100%; height: 100%; object-fit: cover; }
  .doc-chip { position: absolute; left: -28px; bottom: 44px; display: flex; gap: 14px; align-items: center; padding: 12px 22px 12px 12px; background: #fff; border-radius: 999px; box-shadow: 0 18px 40px -14px rgba(20,36,75,.35); }
  .doc-chip img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 50%; }
  .doc-chip b { display: block; font-weight: 600; color: var(--navy); font-size: 16px; }
  .doc-chip span { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
  .next-chip { position: absolute; right: 24px; top: 36px; width: 268px; padding: 18px 20px; background: var(--brand); color: #fff; border-radius: 18px; box-shadow: 0 18px 40px -14px rgba(20,36,75,.45); }
  .next-chip .eyebrow { color: var(--sky); font-size: 11px; }
  .next-chip b { display: block; margin-top: 8px; font: 600 21px/1.15 var(--serif); }
  .next-chip p { margin-top: 10px; font-size: 13px; color: #DCE4F5; display: flex; gap: 8px; align-items: center; }
  .next-chip .bar { margin-top: 12px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.22); overflow: hidden; }
  .next-chip .bar i { display: block; height: 100%; width: 60%; background: #fff; }

  /* two doors */
  .doors { background: #fff; padding: 110px 0; }
  .doors .head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
  .doors .head p { max-width: 420px; color: var(--muted); }
  .doors .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .door { position: relative; border-radius: 26px; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; }
  .door h3 { font: 600 40px/1.02 var(--serif); font-variation-settings: "opsz" 72; margin-top: 14px; }
  .door p { margin-top: 14px; max-width: 420px; font-size: 17px; }
  .door ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .door li { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; }
  .door .go { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; }
  .door-clinic { background: var(--navy); color: #fff; }
  .door-clinic::before { content: ""; position: absolute; inset: 0; background: url(img/09-hands-blue.jpg) center top/cover; opacity: .6; }
  .door-clinic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,36,75,0) 10%, rgba(20,36,75,.95) 62%); }
  .door > * { position: relative; z-index: 1; }
  .door-clinic .eyebrow { color: var(--sky); }
  .door-clinic li { background: rgba(255,255,255,.14); }
  .door-academy { background: var(--brand); color: #fff; }
  .door-academy .eyebrow { color: var(--sky); }
  .door-academy li { background: rgba(255,255,255,.16); }
  .door-academy .mark { position: absolute; right: -70px; top: -40px; width: 420px; opacity: .12; z-index: 0; }

  /* courses */
  .courses { padding: 110px 0; }
  .courses .head { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
  .filters { display: flex; gap: 8px; margin: 36px 0 28px; flex-wrap: wrap; }
  .filters button { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 500; font-size: 14px; color: var(--navy); }
  .filters button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .card { background: #fff; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); }
  .card .top { position: relative; height: 170px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
  .card .top .kind { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
  .card .top .big { font: 300 74px/0.9 var(--serif); color: rgba(255,255,255,.95); }
  .card .top .big small { font-size: 18px; font-family: var(--sans); font-weight: 500; letter-spacing: .08em; margin-left: 6px; color: var(--sky); }
  .card .top .lines { position: absolute; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
  .card .top .lines i { display: block; height: 5px; background: rgba(255,255,255,.55); border-radius: 2px; }
  .t-brand { background: var(--brand); } .t-navy { background: var(--navy); } .t-sky { background: #3E6FD6; } .t-violet { background: #3B3486; } .t-teal { background: #0F6E7A; }
  .card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
  .card h3 { font: 600 24px/1.15 var(--serif); font-variation-settings: "opsz" 72; color: var(--navy); }
  .card .meta { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--muted); }
  .card .meta span { display: flex; gap: 8px; align-items: center; }
  .card .meta .ico { width: 18px; height: 18px; color: var(--brand); }
  .card .seats { margin-top: 18px; font-size: 13px; color: var(--muted); }
  .card .seats .bar { margin-top: 8px; height: 6px; border-radius: 6px; background: var(--ice); overflow: hidden; }
  .card .seats .bar i { display: block; height: 100%; background: var(--brand); }
  .card .foot { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .card .price { font: 600 20px/1 var(--sans); color: var(--navy); }
  .card .price small { display: block; font: 400 12px/1.4 var(--sans); color: var(--muted); margin-top: 4px; }
  .card .tags { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

  /* how it works */
  .how { background: #fff; padding: 110px 0; }
  .how .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
  .steps { margin-top: 44px; display: grid; gap: 0; }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line-cool); }
  .step:last-child { border-bottom: 1px solid var(--line-cool); }
  .step .n { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--brand); display: grid; place-items: center; font: 500 17px/1 var(--serif); color: var(--brand); }
  .step b { font-weight: 600; font-size: 18px; color: var(--navy); }
  .step p { color: var(--muted); font-size: 15.5px; margin-top: 4px; }
  .pay { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .pay span { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line-cool); font-size: 13px; font-weight: 500; color: var(--navy); }
  .cert { position: relative; background: var(--ice); border-radius: 28px; padding: 46px 40px 40px; }
  .cert img { width: 100%; border-radius: 6px; box-shadow: 0 30px 60px -24px rgba(20,36,75,.45); transform: rotate(-2deg); }
  .cert .verify { position: absolute; right: 26px; bottom: -22px; display: flex; gap: 14px; align-items: center; background: var(--navy); color: #fff; padding: 14px 20px 14px 14px; border-radius: 18px; }
  .cert .verify .qr { width: 52px; height: 52px; background: #fff; border-radius: 8px; padding: 5px; }
  .cert .verify b { display: block; font-weight: 500; }
  .cert .verify span { font-size: 13px; color: var(--sky); }

  /* doctor */
  .doctor { background: var(--navy); color: #fff; padding: 120px 0; overflow: hidden; position: relative; }
  .doctor .wrap { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; }
  .doctor .portrait-wrap { position: relative; margin: 0; padding: 20px 20px 0 0; }
  .doctor .arch-line { position: absolute; top: 0; right: 0; left: 20px; bottom: 20px; border: 1.5px solid rgba(169,194,245,.4); border-radius: 240px 240px 28px 28px; }
  .doctor .portrait { position: relative; border-radius: 240px 240px 26px 26px; overflow: hidden; aspect-ratio: 4/5; background: var(--brand); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
  .doctor .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .doctor .cred { position: absolute; left: -24px; bottom: 40px; display: flex; gap: 12px; align-items: center; padding: 12px 22px 12px 12px; background: #fff; color: var(--navy); border-radius: 18px; box-shadow: 0 24px 48px -20px rgba(0,0,0,.55); }
  .doctor .cred .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
  .doctor .cred b { display: block; font-weight: 600; font-size: 16px; line-height: 1.25; }
  .doctor .cred span { font-size: 13.5px; color: var(--muted); }
  .doctor .eyebrow { color: var(--sky); }
  .doctor h2 { font: 600 clamp(40px, 5vw, 64px)/1 var(--serif); font-variation-settings: "opsz" 72; margin-top: 18px; }
  .doctor .ku-name { display: inline-block; font: 600 26px/1.6 var(--kufi); color: var(--sky); margin-top: 8px; }
  .doctor .role { margin-top: 18px; font-size: 19px; color: #DCE4F5; max-width: 600px; }
  .doctor .focus { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; max-width: 640px; }
  .doctor .focus li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
  .doctor .focus .ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(169,194,245,.15); color: var(--sky); display: grid; place-items: center; flex: none; }
  .doctor .focus .ic .ico { width: 20px; height: 20px; }
  .doctor .focus b { display: block; font-weight: 600; font-size: 16px; color: #fff; line-height: 1.3; }
  .doctor .focus span { display: block; margin-top: 3px; font-size: 13.5px; color: #AFC0E4; line-height: 1.4; }
  .doctor blockquote { position: relative; margin-top: 34px; padding-left: 58px; max-width: 600px; }
  .doctor blockquote .qmark { position: absolute; left: 0; top: -8px; font: 600 84px/1 var(--serif); color: var(--brand); }
  .doctor blockquote p { font: 400 italic 26px/1.35 var(--serif); color: #fff; }
  .doctor blockquote cite { display: block; margin-top: 10px; font: 500 12.5px/1 var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
  .doctor .todo { margin-top: 26px; border-color: rgba(169,194,245,.45); color: #C9D6F2; max-width: 600px; font-size: 13.5px; }
  .doctor .ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
  .doctor .ghost-l { border-color: rgba(255,255,255,.6); color: #fff; }
  .doctor .ghost-l:hover { background: #fff; color: var(--navy); border-color: #fff; }
  .doctor .bigmark { position: absolute; right: -120px; bottom: -120px; width: 560px; opacity: .06; }

  /* visit */
  .visit { padding: 110px 0; }
  .visit .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 0; background: #fff; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); }
  .visit .pic { min-height: 520px; background: url(img/clinic-real.jpg) center/cover; position: relative; }
  .visit .pic span { position: absolute; left: 22px; bottom: 22px; background: rgba(20,36,75,.75); color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-radius: 8px; }
  .visit .info { padding: 48px 44px; display: flex; flex-direction: column; }
  .visit h2 { margin-top: 16px; }
  .visit .ku-line { margin-top: 14px; font: 500 17px/1.7 var(--kufi); color: var(--navy); }
  .visit dl { margin-top: 26px; display: grid; gap: 16px; }
  .visit dt { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .visit dd { margin-top: 6px; font-size: 18px; font-weight: 500; color: var(--navy); }
  .visit dd a { color: var(--brand); }
  .visit .ctas { margin-top: auto; padding-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }

  /* footer */
  footer { background: var(--brand); color: #fff; padding: 72px 0 34px; }
  footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  footer .top img { height: 54px; width: auto; }
  footer .top p { margin-top: 18px; color: #DCE4F5; max-width: 320px; font-size: 15px; }
  footer h4 { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; }
  footer ul { list-style: none; display: grid; gap: 10px; font-size: 15px; }
  footer ul a:hover { text-decoration: underline; }
  footer .bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.22); display: flex; justify-content: space-between; font-size: 13px; color: #DCE4F5; gap: 20px; flex-wrap: wrap; }

  /* responsive */
  @media (max-width: 1080px) {
    .nav ul { display: none; }
    .nav .signin span { display: none; }
    .menu-btn { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); margin-left: auto; }
    .nav .acts { margin-left: 0; }
    .hero .wrap, .how .wrap, .visit .wrap { grid-template-columns: 1fr; }
    .doctor .wrap { grid-template-columns: minmax(240px, 340px) 1fr; gap: 40px; align-items: start; }
    .doctor .cred { left: -12px; bottom: 24px; padding: 10px 16px 10px 10px; }
    .doctor .cred .ic { width: 38px; height: 38px; }
    .doctor .cred b { font-size: 14px; }
    .hero .visual { height: 440px; }
    .hero .photo { inset: 0 -16px 0 0; border-radius: 220px 0 0 220px; }
    .doc-chip { left: 12px; bottom: 18px; }
    .doors .grid, .cards { grid-template-columns: 1fr; }
    .doors .head, .courses .head { flex-direction: column; align-items: start; }
    footer .top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .nav .logo img { height: 44px; }
    .strip .phones span:nth-child(2) { display: none; }
    .nav .btn-primary { display: none; }
    .nav .wrap { height: 70px; }
    .hero .wrap { padding-top: 36px; min-height: 0; }
    .hero .points { gap: 18px; }
    .next-chip { right: 12px; top: 16px; width: 220px; padding: 14px 16px; }
    .door { padding: 28px; min-height: 420px; }
    .door h3 { font-size: 32px; }
    .doors, .courses, .how, .doctor, .visit { padding: 72px 0; }
    .doctor .wrap { grid-template-columns: 1fr; }
    .doctor .portrait-wrap { max-width: 340px; }
    .doctor .cred { left: 12px; }
    .doctor .focus { grid-template-columns: 1fr; }
    .doctor blockquote { padding-left: 46px; }
    .doctor blockquote .qmark { font-size: 64px; }
    .doctor blockquote p { font-size: 22px; }
    .visit .info { padding: 32px 24px; }
    .visit .pic { min-height: 300px; }
    footer .top { grid-template-columns: 1fr; }
  }

  /* patient journey */
  .journey { background: var(--ice); padding: 110px 0; }
  .journey .head { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
  .journey .head p { max-width: 420px; color: var(--muted); }
  .jsteps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; list-style: none; }
  .jsteps::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 10px, transparent 10px 18px); opacity: .45; }
  .jstep { position: relative; }
  .jstep .n { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font: 500 22px/1 var(--serif); box-shadow: 0 0 0 8px var(--ice); }
  .jstep .box { margin-top: 22px; background: #fff; border-radius: 20px; padding: 22px 22px 24px; min-height: 230px; border: 1px solid #D7E2F6; }
  .jstep .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ice); color: var(--brand); display: grid; place-items: center; }
  .jstep h3 { margin-top: 16px; font: 600 22px/1.2 var(--serif); font-variation-settings: "opsz" 72; color: var(--navy); }
  .jstep p { margin-top: 10px; font-size: 15px; color: var(--muted); }
  .journey .cta { display: flex; gap: 14px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
  .journey .cta span { color: var(--muted); font-size: 15px; }

  /* questions */
  .qa { background: #fff; padding: 110px 0; }
  .qa .head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 40px; }
  .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  .qa-col { background: var(--paper); border-radius: 24px; padding: 28px 30px 18px; }
  .qa-col h3 { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 18px; color: var(--navy); }
  .qa-col h3 .ic { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--brand); display: grid; place-items: center; }
  .qa-col .faq { margin-top: 16px; }
  .qa-col .faq b { font-size: 16.5px; }

  @media (max-width: 1080px) {
    .jsteps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
    .jsteps::before { display: none; }
    .journey .head, .qa .head { flex-direction: column; align-items: start; }
    .qa-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .journey, .qa { padding: 72px 0; }
    .jsteps { grid-template-columns: 1fr; }
    .jstep .box { min-height: 0; }
    .qa-col { padding: 22px 20px 12px; }
  }
  .qa-col .faq > div { padding: 16px 0; border-top: 1px solid #E8DECF; }
  .qa-col .faq > div:first-child { border-top: 0; }
  .qa-col .faq b { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; color: var(--navy); }
  .qa-col .faq b .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #fff; color: var(--brand); }
  .qa-col .faq p { margin-top: 10px; color: var(--muted); font-size: 15px; max-width: 520px; }

  /* course card with its own cover (poster): the top of the poster shows, with the type and date on it */
  .card .cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
  .card .cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .card:hover .cover img { transform: scale(1.045); }
  .card .cover::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 26, 58, .28) 0%, transparent 28%, transparent 62%, rgba(14, 26, 58, .55) 100%); }
  .card .cover .kind { position: absolute; z-index: 2; top: 14px; inset-inline-start: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(14, 26, 58, .72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
  .card .cover .date-chip { position: absolute; z-index: 2; bottom: 14px; inset-inline-start: 14px; display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 12px;
    background: #fff; color: var(--navy); font: 500 12px/1 var(--sans); letter-spacing: .08em; box-shadow: 0 10px 24px -12px rgba(14, 26, 58, .6); }
  .card .cover .date-chip b { font: 600 22px/1 var(--serif); letter-spacing: 0; color: var(--brand); }
  [dir="rtl"] .card .cover .kind, [dir="rtl"] .card .cover .date-chip { letter-spacing: 0; font-family: var(--kufi); }