@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=Tajawal:wght@300;400;500;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500&display=swap');

    /* ══ Design tokens — built-in defaults (Modern 1 "Ink").
       A custom theme injects its own :root block after this stylesheet. ══ */
    :root {
      --cw-primary: #0a0a0a;
      --cw-bg: #ffffff;
      --cw-surface: #fafafa;
      --cw-line: #e5e7eb;
      --cw-text: #0a0a0a;
      --cw-body: #4b5563;
      --cw-soft: #6b7280;
      --cw-label: #9ca3af;
      --cw-on-primary: #ffffff;
      --cw-radius: 14px;
      --cw-btn-radius: 0px;
      --cw-sect-pad: 5rem;
      --cw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      --cw-font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      --cw-font-arabic: 'Tajawal', 'IBM Plex Sans Arabic', -apple-system, sans-serif;
    }

    * {
      font-family: var(--cw-font-body);
      -webkit-font-smoothing: antialiased;
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--cw-bg);
      color: var(--cw-text);
    }

    h1, h2, h3 { font-family: var(--cw-font-head) }

    ::selection {
      background: color-mix(in srgb, var(--cw-primary) 10%, transparent)
    }

    .rv {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1)
    }

    .rv.on {
      opacity: 1;
      transform: translateY(0)
    }

    .d1 { transition-delay: .06s }
    .d2 { transition-delay: .12s }
    .d3 { transition-delay: .18s }
    .d4 { transition-delay: .24s }
    .d5 { transition-delay: .3s }
    .d6 { transition-delay: .36s }

    .navpill {
      pointer-events: auto;
      display: flex;
      align-items: center;
      background: color-mix(in srgb, var(--cw-bg) 78%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid color-mix(in srgb, var(--cw-primary) 7%, transparent);
      border-radius: 999px;
      box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .16);
      padding: 7px 8px 7px 22px;
      transition: box-shadow .4s, background .4s, padding .4s;
    }

    .navpill.sc {
      background: color-mix(in srgb, var(--cw-bg) 94%, transparent);
      box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .22);
    }

    .pill-logo {
      font-family: var(--cw-font-head);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -.2px;
      color: var(--cw-primary);
      text-decoration: none;
      white-space: nowrap;
    }

    .navpill .nl { white-space: nowrap }

    .nl {
      color: var(--cw-body);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: .1px;
      text-decoration: none;
      transition: color .2s;
    }

    .nl:hover { color: var(--cw-primary) }

    #mm {
      background: color-mix(in srgb, var(--cw-bg) 99%, transparent);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, transform .3s cubic-bezier(.16, 1, .3, 1);
      transform: translateY(-4px)
    }

    #mm.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0)
    }

    .mla {
      color: var(--cw-primary);
      font-size: 20px;
      font-weight: 300;
      text-decoration: none;
      display: block;
      padding: 20px 0;
      border-bottom: 1px solid var(--cw-line);
      letter-spacing: -.3px;
    }

    .btn-b {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: .1px;
      padding: 11px 22px;
      background: var(--cw-primary);
      color: var(--cw-on-primary);
      border: 1px solid var(--cw-primary);
      border-radius: var(--cw-btn-radius);
      cursor: pointer;
      text-decoration: none;
      transition: background .25s, color .25s, opacity .25s;
    }

    .btn-b:hover { background: color-mix(in srgb, var(--cw-primary) 80%, #000) }

    .btn-pill {
      border-radius: 999px;
    }

    .hamb {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: var(--cw-primary);
      color: var(--cw-on-primary);
      border: none;
      cursor: pointer;
      flex-shrink: 0;
    }

    .btn-w {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: .1px;
      padding: 11px 22px;
      background: var(--cw-bg);
      color: var(--cw-primary);
      border: 1px solid var(--cw-bg);
      border-radius: var(--cw-btn-radius);
      cursor: pointer;
      text-decoration: none;
      transition: opacity .25s;
    }

    .btn-w:hover { opacity: .82 }

    .btn-g {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
      font-weight: 400;
      padding: 11px 20px;
      background: transparent;
      color: rgba(255, 255, 255, .92);
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: var(--cw-btn-radius);
      cursor: pointer;
      text-decoration: none;
      transition: all .25s;
    }

    .btn-g:hover { border-color: rgba(255, 255, 255, .65) }

    .lang-btn {
      color: var(--cw-primary);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      direction: ltr;
      min-width: 92px;
      height: 34px;
      padding: 0 13px;
      border: 1px solid color-mix(in srgb, var(--cw-primary) 10%, transparent);
      border-radius: 999px;
      transition: background .2s, color .2s, border-color .2s;
      cursor: pointer;
      background: color-mix(in srgb, var(--cw-bg) 55%, transparent);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      font-size: 13px;
      font-weight: 500;
    }
    .lang-btn .lang-code { font-size: 12px; letter-spacing: .04em; }

    .lang-btn:hover { color: var(--cw-primary); border-color: color-mix(in srgb, var(--cw-primary) 18%, transparent); background: color-mix(in srgb, var(--cw-bg) 82%, transparent); }

    /* RTL / Arabic spacing fixes */
    [dir="rtl"] .navpill { padding: 7px 22px 7px 8px; }
    [dir="rtl"] .navpill .nl { letter-spacing: 0; }
    [dir="rtl"] .lang-btn { direction: ltr; }

    .si { animation: sip 2.6s ease-in-out infinite }

    @keyframes sip {
      0%, 100% { opacity: .3; transform: translateY(0) }
      50% { opacity: .7; transform: translateY(5px) }
    }

    .fc { border-right: 1px solid var(--cw-line) }
    .fc:last-child { border-right: none }

    .svc-cell {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 240px;
      padding: 36px 30px;
      text-decoration: none;
      color: inherit;
      transition: background .35s;
    }

    .svc-cell:hover { background: color-mix(in srgb, var(--cw-primary) 3%, var(--cw-bg)) }

    .svc-cell-num {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      color: var(--cw-label);
    }

    .svc-cell-title {
      font-size: 19px;
      font-weight: 300;
      letter-spacing: -.3px;
      margin: 22px 0 8px;
    }

    .svc-cell-desc {
      font-size: 12.5px;
      font-weight: 300;
      color: var(--cw-body);
      line-height: 1.7;
      max-width: 22rem;
    }

    .svc-cell-arrow {
      align-self: flex-end;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid var(--cw-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 22px;
      flex-shrink: 0;
      transition: background .3s, transform .4s cubic-bezier(.16, 1, .3, 1);
    }

    .svc-cell-arrow svg { transition: stroke .3s }

    .svc-cell:hover .svc-cell-arrow {
      background: var(--cw-primary);
      transform: translate(3px, -3px) rotate(45deg);
    }

    .svc-cell:hover .svc-cell-arrow svg { stroke: var(--cw-on-primary) }

    [dir="rtl"] .svc-cell-arrow svg { transform: scaleX(-1); }
    [dir="rtl"] .svc-cell:hover .svc-cell-arrow { transform: translate(-3px, -3px) rotate(45deg); }

    .hero-img {
      filter: none;
    }

    @media(max-width:767px) {
      .ht { font-size: clamp(30px, 8.5vw, 48px) !important; letter-spacing: -.9px !important }
      .fc { border-right: none; border-bottom: 1px solid var(--cw-line); padding-bottom: 18px !important }
      .fc:last-child { border-bottom: none; padding-bottom: 0 !important }
    }

    /* ══ Arabic / RTL typography — clean & minimal ══ */
    [dir="rtl"] body,
    html[lang="ar"] body {
      font-family: var(--cw-font-arabic) !important;
    }
    /* connected script must never be letter-spaced */
    [dir="rtl"] *,
    html[lang="ar"] * { letter-spacing: 0 !important; }
    /* light weights go wispy in Arabic — lift them one step */
    [dir="rtl"] .font-light { font-weight: 400; }
    [dir="rtl"] .font-medium { font-weight: 500; }
    /* Arabic needs more vertical air */
    [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.45; }
    [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] div { line-height: 1.85; }
    /* uppercase micro-labels: no case in Arabic — mute them instead */
    [dir="rtl"] .uppercase { text-transform: none; opacity: .75; }

/* ══ Doctors section (minimalist) ══ */
.doc-card-public { text-align:center; }
.doc-photo-wrap {
    width:120px; height:120px; margin:0 auto 18px;
    border-radius:50%; overflow:hidden;
    background: color-mix(in srgb, var(--cw-primary) 5%, var(--cw-bg));
    box-shadow:0 18px 40px -26px rgba(0,0,0,.4);
}
.doc-photo { width:100%; height:100%; object-fit:cover; display:block; }
.doc-name { font-size:17px; font-weight:500; color:var(--cw-primary); letter-spacing:-.3px; margin:0 0 4px; }
.doc-role { font-size:12.5px; color:var(--cw-soft); margin:0 0 12px; }
.doc-bio { font-size:13.5px; color:var(--cw-body); line-height:1.7; margin:0; }
[dir="rtl"] .doc-card-public { text-align:right; }
[dir="rtl"] .doc-photo-wrap { margin-right:auto; }
    @media(max-width:767px){
        .doc-photo-wrap { width:104px; height:104px; }
    }

    /* ══ Light editorial additions (Modern 1) ══ */
    .btn-ink {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: .1px;
      padding: 12px 24px;
      background: var(--cw-primary);
      color: var(--cw-on-primary);
      border: 1px solid var(--cw-primary);
      border-radius: var(--cw-btn-radius);
      cursor: pointer;
      text-decoration: none;
      transition: background .25s, opacity .25s;
    }
    .btn-ink:hover { background: color-mix(in srgb, var(--cw-primary) 85%, #000); }

    .btn-line {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
      font-weight: 500;
      padding: 12px 22px;
      background: transparent;
      color: var(--cw-primary);
      border: 1px solid var(--cw-primary);
      border-radius: var(--cw-btn-radius);
      cursor: pointer;
      text-decoration: none;
      transition: background .25s, color .25s;
    }
    .btn-line:hover { background: var(--cw-primary); color: var(--cw-on-primary); }

    .svc-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 220px;
      padding: 28px 26px;
      background: var(--cw-bg);
      border: 1px solid var(--cw-line);
      border-radius: var(--cw-radius);
      text-decoration: none;
      color: inherit;
      transition: background .35s, border-color .35s, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
    }
    .svc-card:hover {
      background: var(--cw-surface);
      border-color: color-mix(in srgb, var(--cw-primary) 18%, var(--cw-bg));
      transform: translateY(-3px);
      box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .4);
    }
    .svc-card-num {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--cw-label);
    }
    .svc-card-title {
      font-size: 18px;
      font-weight: 300;
      letter-spacing: -.3px;
      margin: 18px 0 8px;
      color: var(--cw-primary);
    }
    .svc-card-desc {
      font-size: 12.5px;
      font-weight: 300;
      color: var(--cw-body);
      line-height: 1.7;
      max-width: 22rem;
    }
    .svc-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 22px;
      gap: 10px;
    }
    .svc-card-arrow {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid var(--cw-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .3s, transform .4s cubic-bezier(.16, 1, .3, 1);
    }
    .svc-card:hover .svc-card-arrow {
      background: var(--cw-primary);
      transform: translate(3px, -3px) rotate(45deg);
    }
    .svc-card:hover .svc-card-arrow svg { stroke: var(--cw-on-primary); }
    [dir="rtl"] .svc-card-arrow svg { transform: scaleX(-1); }
    [dir="rtl"] .svc-card:hover .svc-card-arrow { transform: translate(-3px, -3px) rotate(45deg); }

    [dir="rtl"] .svc-card-desc { line-height: 1.85; }

    /* ══ Token hooks for the markup that uses Tailwind arbitrary values.
       Attribute selectors match the generated class names 1:1, so theme
       tokens win over the CDN-generated utilities. ══ */
    [class~="text-[#0a0a0a]"] { color: var(--cw-text) !important }
    [class~="hover:text-[#0a0a0a]"]:hover { color: var(--cw-primary) !important }
    [class~="text-[#4b5563]"] { color: var(--cw-body) !important }
    [class~="text-[#374151]"] { color: var(--cw-body) !important }
    [class~="text-[#6b7280]"] { color: var(--cw-soft) !important }
    [class~="text-[#9ca3af]"] { color: var(--cw-label) !important }
    [class~="text-[#d1d5db]"] { color: color-mix(in srgb, var(--cw-label) 55%, var(--cw-bg)) !important }
    [class~="bg-white"] { background-color: var(--cw-bg) !important }
    [class~="bg-[#fafafa]"] { background-color: var(--cw-surface) !important }
    [class~="bg-[#e5e7eb]"] { background-color: var(--cw-line) !important }
    [class~="border-[#e5e7eb]"] { border-color: var(--cw-line) !important }
    /* density + arbitrary-radius overrides are injected by custom themes only,
       so the built-in themes keep their exact original spacing */

    /* ═══ Layout attribute hooks — fully server-rendered, no user JS ═══ */
    /* Content width */
    [data-l-cw="boxed"] { --cw-content-w: 1152px; }
    [data-l-cw="wide"]  { --cw-content-w: 1360px; }
    [data-l-cw="full"]  { --cw-content-w: 100%; }
    .cw-content-w { max-width: var(--cw-content-w, 1152px); margin: 0 auto; }

    /* Nav style: solid bar */
    [data-l-nav="solid"] .navpill {
        border-radius: 0;
        background: var(--cw-bg, #fff);
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
        padding: 10px 24px;
    }
    [data-l-nav="solid"] .navpill .pill-logo { font-size: 15px; }
    [data-l-nav="solid"] .navpill .nl { font-size: 13.5px; }

    /* Hero — plain CSS grid on #hero-grid (no Tailwind fight) */
    [data-l-width="35"]#hero { --hero-w: 35%; }
    [data-l-width="45"]#hero { --hero-w: 45%; }
    [data-l-width="55"]#hero { --hero-w: 55%; }
    [data-l-width="100"]#hero { --hero-w: 100%; }

    [data-l-image="left"] #hero-grid {
        grid-template-columns: var(--hero-w, 45%) 1fr !important;
        direction: rtl;
    }
    [data-l-image="left"] #hero-grid > * { direction: ltr; }
    [data-l-image="top"] #hero-grid { grid-template-columns: 1fr !important; }
    [data-l-image="top"] #hero-text { order: -1; }
    [data-l-image="behind"]#hero { position: relative; }
    [data-l-image="behind"] #hero-grid { grid-template-columns: 1fr !important; text-align: center; }
    [data-l-image="behind"] #hero-image { position: absolute !important; inset: 0 !important; z-index: 0 !important; opacity: .35 !important; }
    [data-l-image="behind"] #hero-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    [data-l-image="hidden"] #hero-image { display: none !important; }
    [data-l-image="hidden"] #hero-grid { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
    [data-l-align="center"] #hero-text { text-align: center !important; }
    [data-l-align="center"] #hero-text .flex { justify-content: center; }
    [data-l-height="short"]#hero .max-w-6xl { padding-block: 60px 50px !important; }
    [data-l-height="tall"]#hero .max-w-6xl { padding-block: 120px 100px !important; }

    /* Hero — eyebrow / subtitle / actions visibility */
    [data-l-eyebrow="hide"]  [data-hero-eyebrow]  { display: none; }
    [data-l-subtitle="hide"] [data-hero-subtitle] { display: none; }
    [data-l-actions="hide"]  [data-hero-actions]  { display: none; }

    /* Hero — text column width */
    [data-l-textwidth="narrow"]#hero-text { max-width: 420px; }
    [data-l-textwidth="wide"]#hero-text   { max-width: 680px; }

    /* Hero — light tone: white text on dark hero bg (pairs with behind/top image) */
    [data-l-tone="light"]#hero { background-color: #0a0a0a !important; }
    [data-l-tone="light"]#hero .bg-white { background-color: transparent !important; }
    [data-l-tone="light"]#hero .border-\[\#e5e7eb\] { border-color: rgba(255,255,255,.12) !important; }
    [data-l-tone="light"]#hero .bg-\[\#fafafa\] { background-color: rgba(255,255,255,.06) !important; }
    [data-l-tone="light"] #hero-text h1 { color: #fff !important; }
    [data-l-tone="light"] #hero-text p { color: rgba(255,255,255,.82) !important; }
    [data-l-tone="light"] #hero-text .text-\[\#9ca3af\] { color: rgba(255,255,255,.55) !important; }
    [data-l-tone="light"] #hero-text .text-\[\#4b5563\] { color: rgba(255,255,255,.82) !important; }
    [data-l-tone="light"] #hero-text a.btn-ink  { color: #0a0a0a !important; background-color: #fff !important; }
    [data-l-tone="light"] #hero-text a.btn-line { color: #fff !important; border-color: rgba(255,255,255,.35) !important; }
    [data-l-tone="light"] #hero-text a.btn-line:hover { border-color: #fff !important; }
    [data-l-tone="light"] #hero-image .border-\[\#e5e7eb\] { border-color: rgba(255,255,255,.1) !important; }
    [data-l-tone="light"] #hero-image .bg-\[\#fafafa\] { background-color: rgba(255,255,255,.06) !important; }
    [data-l-tone="light"] #hero-image .text-\[\#d1d5db\] { color: rgba(255,255,255,.3) !important; }

    /* Sections columns */
    [data-l-columns="2"]#services .grid { grid-template-columns: repeat(2, 1fr); }
    [data-l-columns="2"]#doctors .grid { grid-template-columns: repeat(2, 1fr); }
    [data-l-colalign="start"]#doctors .grid > * { text-align: start; }
    [data-l-colalign="start"]#doctors h2 { text-align: start; }
    [data-l-align="start"]#about .max-w-2xl { margin-inline-start: 0; margin-inline-end: auto; text-align: start; }
    [data-l-align="center"]#about .max-w-2xl { margin-inline: auto; text-align: center; }

    /* Book/CTA alignment + style */
    [data-l-align="start"]#book .max-w-3xl { margin-inline-start: 0; text-align: start; }
    [data-l-ctastyle="ink"]#book { background: var(--cw-primary, #0a0a0a); color: var(--cw-bg, #fff); }
    [data-l-ctastyle="ink"]#book .text-\[\#0a0a0a\] { color: var(--cw-bg, #fff); }
    [data-l-ctastyle="ink"]#book h2 { color: var(--cw-bg, #fff); }

    @media (max-width: 767px) {
        /* The hero grid's columns are set inline on #hero-grid, so the mobile
           single-column stack must use !important to win. Covering the bare
           selector (not just left/right) fixes the default "right" layout too. */
        #hero-grid { grid-template-columns: 1fr !important; }
        [data-l-image="left"] #hero-grid { direction: ltr; }
        [data-l-image="top"] #hero-text { order: -1; }
        [data-l-columns="2"]#services .grid,
        [data-l-columns="3"]#services .grid { grid-template-columns: 1fr; }
        [data-l-columns="2"]#doctors .grid,
        [data-l-columns="3"]#doctors .grid { grid-template-columns: 1fr; }
    }