@layer reset, base, layout, components, motion, responsive, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: light;
    --font-body-latin: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display-latin: "Cormorant Garamond", Georgia, serif;
    --font-body-rtl: "Vazirmatn", Tahoma, Arial, sans-serif;
    --font-display-rtl: "Noto Naskh Arabic", "Vazirmatn", serif;
    --page: #f6f2ea;
    --page-alt: #eee8dd;
    --surface: rgba(255, 255, 255, .72);
    --surface-strong: #fffdf8;
    --surface-soft: rgba(255, 255, 255, .48);
    /* Always dark, regardless of theme: used by panels that hardcode white
       text (doctor-feature, cta-panel, portrait-caption, article-header). */
    --surface-onyx: #0b2231;
    /* Same reasoning for the cta-panel gradient's first stop: --brand-strong
       flips to a light cyan in dark mode, which washed out the white CTA text. */
    --brand-onyx: #084d66;
    --text: #153142;
    --text-strong: #082434;
    --muted: #667b87;
    --line: rgba(21, 49, 66, .13);
    --line-strong: rgba(21, 49, 66, .24);
    --brand: #0d6d89;
    --brand-strong: #084d66;
    --accent: #c79855;
    --accent-strong: #94682e;
    --accent-soft: rgba(199, 152, 85, .16);
    --success: #247451;
    --danger: #a53a4c;
    --shadow-sm: 0 18px 50px rgba(36, 58, 68, .08);
    --shadow-md: 0 25px 70px rgba(31, 52, 63, .13);
    --shadow-lg: 0 40px 110px rgba(22, 42, 53, .18);
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 34px;
    --shell: 1220px;
    --ease: cubic-bezier(.22, .8, .24, 1);
    --header-h: 82px;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --page: #07131d;
    --page-alt: #0b1c28;
    --surface: rgba(13, 31, 43, .76);
    --surface-strong: #0e2635;
    --surface-soft: rgba(19, 46, 62, .58);
    --text: #eaf2f2;
    --text-strong: #ffffff;
    --muted: #a5b7bf;
    --line: rgba(198, 225, 231, .13);
    --line-strong: rgba(198, 225, 231, .24);
    --brand: #69c7db;
    --brand-strong: #a4e1ec;
    --accent: #d9b071;
    --accent-strong: #f0c98b;
    --accent-soft: rgba(217, 176, 113, .14);
    --success: #83d9b1;
    --danger: #ff9aac;
    --shadow-sm: 0 18px 52px rgba(0, 0, 0, .22);
    --shadow-md: 0 28px 80px rgba(0, 0, 0, .3);
    --shadow-lg: 0 42px 120px rgba(0, 0, 0, .42);
  }

  html { background: var(--page); }
  body {
    min-block-size: 100vh;
    overflow-x: clip;
    background:
      radial-gradient(circle at 8% 5%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 28rem),
      radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30rem),
      linear-gradient(155deg, var(--page), var(--page-alt));
    color: var(--text);
    font-family: var(--font-body-latin);
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
  }
  html[dir="rtl"] body { font-family: var(--font-body-rtl); line-height: 1.95; }
  body.nav-open { overflow: hidden; }
  main { position: relative; z-index: 1; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  p, address { color: var(--muted); }
  address { font-style: normal; }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 3px; }
  ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text-strong); }

  h1, h2, h3, h4 {
    color: var(--text-strong);
    font-family: var(--font-display-latin);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  html[dir="rtl"] h1,
  html[dir="rtl"] h2 { font-family: var(--font-display-rtl); line-height: 1.35; letter-spacing: 0; }
  html[dir="rtl"] h3,
  html[dir="rtl"] h4 { font-family: var(--font-body-rtl); line-height: 1.55; letter-spacing: 0; font-weight: 750; }
  h1 { font-size: clamp(3.2rem, 7vw, 7rem); }
  h2 { font-size: clamp(2.3rem, 4.5vw, 4.4rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
  h4 { font-size: 1.06rem; }
  html[dir="rtl"] h1 { font-size: clamp(2.8rem, 6.4vw, 6rem); }
  html[dir="rtl"] h2 { font-size: clamp(2.15rem, 4.2vw, 4rem); }
}

@layer layout {
  .shell { inline-size: min(calc(100% - 2.5rem), var(--shell)); margin-inline: auto; }
  .section { padding-block: clamp(5rem, 9vw, 9rem); }
  .section-tight { padding-block-start: 1.75rem; }
  .section-heading { margin-block-end: clamp(2rem, 5vw, 4.5rem); }
  .section-heading.centered { max-inline-size: 780px; margin-inline: auto; text-align: center; }
  .section-heading.centered p { max-inline-size: 62ch; margin: 1.25rem auto 0; }
  .split-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); align-items: end; gap: 2rem; }
  .split-heading > p { max-inline-size: 48ch; justify-self: end; }
  html[dir="rtl"] .split-heading > p { justify-self: start; }

  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .78fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
  .page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .35fr); align-items: end; gap: clamp(2rem, 7vw, 7rem); }
  .value-grid, .philosophy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
  .philosophy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .feature-grid { display: grid; grid-template-columns: minmax(320px, .7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; }
  .about-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
  .services-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
  .booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; align-items: start; }
  .blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .case-grid { display: grid; gap: 1.4rem; }
  .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start; padding-block-end: clamp(5rem, 8vw, 8rem); }
  .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, .75fr)); gap: 2.3rem; }
}

@layer components {
  .glass-panel, .glass-card {
    border: 1px solid var(--line);
    background: linear-gradient(140deg, var(--surface-strong), var(--surface));
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
  }
  .glass-panel { border-radius: var(--radius-lg); }
  .glass-card { border-radius: var(--radius-md); }
  @supports not (backdrop-filter: blur(1px)) { .glass-panel, .glass-card { background: var(--surface-strong); } }

  .ambient { position: fixed; z-index: 0; inline-size: 25rem; block-size: 25rem; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }
  .ambient-one { inset-block-start: 8%; inset-inline-start: -13rem; background: var(--brand); }
  .ambient-two { inset-block-start: 52%; inset-inline-end: -15rem; background: var(--accent); }

  .skip-link { position: fixed; z-index: 1000; inset-block-start: .7rem; inset-inline-start: .7rem; transform: translateY(-160%); padding: .75rem 1rem; border-radius: 12px; background: var(--text-strong); color: var(--page); transition: transform .2s ease; }
  .skip-link:focus { transform: translateY(0); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--accent-strong);
    font-family: var(--font-body-latin);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  html[dir="rtl"] .eyebrow { font-family: var(--font-body-rtl); font-size: .82rem; letter-spacing: .04em; }
  .eyebrow::before { content: ""; inline-size: 28px; block-size: 1px; background: currentColor; }
  .lead { max-inline-size: 66ch; color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.8; }
  html[dir="rtl"] .lead { line-height: 2; }
  .text-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--brand-strong); font-size: .9rem; font-weight: 800; }
  .text-link span { transition: transform .2s ease; }
  .text-link:hover span { transform: translate(3px, -3px); }
  html[dir="rtl"] .text-link:hover span { transform: translate(-3px, -3px); }

  .button, .header-booking-button {
    min-block-size: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding-inline: 1.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s ease, background .25s ease, border-color .25s ease;
  }
  .button:hover, .header-booking-button:hover { transform: translateY(-2px); }
  .button-primary, .header-booking-button { background: var(--brand-strong); color: #fff; box-shadow: 0 14px 32px color-mix(in srgb, var(--brand) 22%, transparent); }
  html[data-theme="dark"] .button-primary,
  html[data-theme="dark"] .header-booking-button { background: var(--accent); color: #10212a; }
  .button-secondary { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text-strong); }
  .button-secondary:hover { background: var(--surface-strong); }

  .site-header { position: sticky; z-index: 100; inset-block-start: 0; padding-block: .7rem; transition: padding .25s var(--ease); }
  .site-header.is-scrolled { padding-block: .35rem; }
  .header-shell {
    min-block-size: 70px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .55rem .65rem .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
  }
  html[dir="rtl"] .header-shell { padding: .55rem .8rem .55rem .65rem; }
  .brand { min-inline-size: 0; display: inline-flex; align-items: center; gap: .7rem; }
  .brand-mark, .brand > img { flex: 0 0 auto; }
  .brand img { inline-size: 44px; block-size: 44px; }
  .brand-copy { min-inline-size: 0; display: grid; line-height: 1.2; }
  .brand-copy strong { overflow: hidden; color: var(--text-strong); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
  .brand-copy span { overflow: hidden; margin-block-start: .25rem; color: var(--muted); font-size: .62rem; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
  .primary-nav { display: flex; justify-content: center; align-items: center; gap: .15rem; }
  .primary-nav a { padding: .7rem .75rem; border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 750; transition: color .2s ease, background .2s ease; }
  .primary-nav a:hover, .primary-nav a.is-active { background: var(--surface-soft); color: var(--text-strong); }
  .header-actions { display: flex; align-items: center; gap: .42rem; }
  .header-booking-button { min-block-size: 42px; padding-inline: 1rem; font-size: .78rem; }
  .header-booking-button svg { inline-size: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html[dir="rtl"] .header-booking-button svg { transform: scaleX(-1); }
  .icon-button { inline-size: 42px; block-size: 42px; flex: 0 0 auto; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
  .icon-button:hover { background: var(--surface-strong); border-color: var(--line-strong); transform: translateY(-1px); }
  .theme-toggle svg { inline-size: 19px; block-size: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .theme-toggle .sun-icon { display: none; }
  html[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
  html[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
  .language-switcher { position: relative; }
  .language-button { inline-size: auto; min-inline-size: 62px; grid-auto-flow: column; gap: .32rem; padding-inline: .5rem; border-radius: 999px; }
  /* Was a generic `.language-button > svg` rule for the old globe icon. It now
     also matched the flag and forced fill:none on it, so it is scoped to the
     chevron that actually needs the stroked-icon treatment. */
  .language-chevron { inline-size: 12px; block-size: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .language-code { font-size: .64rem; font-weight: 800; }
  .language-menu { position: absolute; z-index: 30; inset-block-start: calc(100% + .65rem); inset-inline-end: 0; min-inline-size: 190px; padding: .45rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); box-shadow: var(--shadow-lg); }
  /* Fixed 3:2 box so every flag occupies the same footprint and the language
     names stay on a single optical column regardless of the artwork. */
  .flag {
    flex: 0 0 auto; inline-size: 21px; block-size: 14px;
    border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent);
    object-fit: cover;
  }
  .language-name { display: inline-flex; align-items: center; gap: .6rem; }
  .language-menu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem .75rem; border-radius: 11px; color: var(--muted); font-size: .86rem; }
  .language-menu a:hover, .language-menu a.is-current { background: var(--surface-soft); color: var(--text-strong); }
  .language-menu small { font-family: var(--font-body-latin); font-size: .62rem; font-weight: 800; }
  .nav-toggle { display: none; }
  .nav-toggle span { inline-size: 18px; block-size: 1.5px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .hero { min-block-size: calc(100svh - 98px); display: grid; align-items: center; padding-block-start: clamp(4rem, 8vw, 8rem); }
  .hero-copy { position: relative; z-index: 2; }
  .hero-copy h1 { max-inline-size: 12ch; margin-block: 1rem 1.4rem; }
  html[dir="rtl"] .hero-copy h1 { max-inline-size: 13ch; }
  .hero-copy .lead { max-inline-size: 61ch; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1.9rem; }
  .trust-list { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-block-start: 1.7rem; list-style: none; }
  .trust-list li { display: inline-flex; align-items: center; gap: .42rem; color: var(--muted); font-size: .78rem; font-weight: 650; }
  .trust-list li span { color: var(--accent-strong); }
  .hero-visual { position: relative; min-inline-size: 0; }
  .portrait-card { position: relative; max-inline-size: 520px; margin-inline: auto; overflow: hidden; padding: .65rem; }
  .portrait-card picture { overflow: hidden; border-radius: calc(var(--radius-lg) - 10px); }
  .portrait-card img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
  .portrait-caption { position: absolute; inset-inline: 1.35rem; inset-block-end: 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--surface-onyx) 84%, transparent); color: #fff; backdrop-filter: blur(14px); }
  .portrait-caption strong { font-size: .85rem; }
  .portrait-caption span { color: rgba(255,255,255,.7); font-size: .68rem; text-align: end; }
  .floating-badge { position: absolute; min-inline-size: 138px; padding: .95rem 1rem; border-radius: 18px; }
  .floating-badge strong { display: block; color: var(--text-strong); font-family: var(--font-display-latin); font-size: 2rem; line-height: 1; }
  html[dir="rtl"] .floating-badge strong { font-family: var(--font-body-rtl); font-size: 1.65rem; }
  .floating-badge span { display: block; margin-block-start: .35rem; color: var(--muted); font-size: .68rem; }
  .badge-one { inset-inline-start: -2.2rem; inset-block-start: 18%; }
  .badge-two { inset-inline-end: -2rem; inset-block-end: 18%; }
  .hero-scroll-cue { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-block-start: 2rem; color: var(--muted); font-size: .67rem; }
  .hero-scroll-cue span { inline-size: 1px; block-size: 28px; background: linear-gradient(var(--brand), transparent); }

  .signature-strip { overflow: hidden; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 70%, transparent); }
  .signature-strip-track { inline-size: max-content; display: flex; animation: marquee 34s linear infinite; }
  html[dir="rtl"] .signature-strip-track { animation-direction: reverse; }
  .signature-metric { min-inline-size: 245px; display: flex; align-items: center; gap: .8rem; padding: 1.2rem 2rem; border-inline-end: 1px solid var(--line); }
  .signature-metric strong { color: var(--text-strong); font-family: var(--font-display-latin); font-size: 1.75rem; font-weight: 600; }
  html[dir="rtl"] .signature-metric strong { font-family: var(--font-body-rtl); font-size: 1.4rem; }
  .signature-metric span { color: var(--muted); font-size: .75rem; }

  .icon-card, .process-grid li, .philosophy-grid article { position: relative; min-block-size: 260px; padding: 1.45rem; overflow: hidden; }
  .icon-card h3, .process-grid h3, .philosophy-grid h3 { margin-block: 1.5rem .7rem; }
  .icon-card p, .process-grid p, .philosophy-grid p { font-size: .9rem; }
  .icon-orb { inline-size: 48px; block-size: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: .75rem; font-weight: 800; }
  .card-index { position: absolute; inset-inline-end: 1.2rem; inset-block-start: 1rem; color: color-mix(in srgb, var(--muted) 45%, transparent); font-family: var(--font-display-latin); font-size: 2rem; }
  .service-card { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; min-block-size: 255px; padding: 1.5rem; }
  .service-number { color: var(--accent-strong); font-family: var(--font-display-latin); font-size: 2.2rem; line-height: 1; }
  html[dir="rtl"] .service-number { font-family: var(--font-body-rtl); font-size: 1.7rem; }
  .service-kicker { color: var(--accent-strong); font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
  html[dir="rtl"] .service-kicker { letter-spacing: .03em; }
  .service-card h3 { margin-block: .7rem .75rem; }
  .service-card p { margin-block-end: 1.2rem; font-size: .9rem; }

  .doctor-feature { background: var(--surface-onyx); color: #fff; }
  .doctor-feature .feature-grid { padding: clamp(1rem, 2vw, 1.6rem); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.045); box-shadow: none; }
  .feature-image { overflow: hidden; border-radius: calc(var(--radius-lg) - 8px); }
  .feature-image img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
  .feature-copy { padding: clamp(1rem, 3vw, 2.3rem); }
  .feature-copy h2 { margin-block: .9rem 1.2rem; color: #fff; }
  .feature-copy p { color: rgba(255,255,255,.7); }
  .credential-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-block: 1.8rem; }
  .credential-mini-grid div { padding: .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.045); }
  .credential-mini-grid strong { display: block; color: var(--accent); font-family: var(--font-display-latin); font-size: 1.55rem; }
  html[dir="rtl"] .credential-mini-grid strong { font-family: var(--font-body-rtl); }
  .credential-mini-grid span { display: block; margin-block-start: .3rem; color: rgba(255,255,255,.64); font-size: .67rem; }
  .doctor-feature .button-secondary { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); color: #fff; }
  .step-number { display: block; color: var(--accent-strong); font-family: var(--font-display-latin); font-size: 2rem; }
  html[dir="rtl"] .step-number { font-family: var(--font-body-rtl); font-size: 1.55rem; }

  .cta-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: clamp(2rem, 5vw, 4.5rem); background: linear-gradient(135deg, var(--brand-onyx), color-mix(in srgb, var(--surface-onyx) 82%, var(--brand))); color: #fff; }
  .cta-panel h2 { max-inline-size: 14ch; margin-block: .8rem 1rem; color: #fff; }
  .cta-panel p { max-inline-size: 60ch; color: rgba(255,255,255,.7); }
  .cta-panel .eyebrow { color: var(--accent); }
  .cta-panel .button-primary { background: #fff; color: #123244; box-shadow: none; }

  .page-hero { padding-block-start: clamp(5rem, 8vw, 8rem); }
  .page-hero h1 { max-inline-size: 14ch; margin-block: .8rem 1.2rem; }
  .page-hero-stat { min-block-size: 220px; display: grid; align-content: end; padding: 1.5rem; }
  .page-hero-stat strong { color: var(--accent-strong); font-family: var(--font-display-latin); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 600; line-height: 1; }
  html[dir="rtl"] .page-hero-stat strong { font-family: var(--font-body-rtl); font-size: clamp(1.8rem, 3.5vw, 3rem); }
  .page-hero-stat span { max-inline-size: 24ch; margin-block-start: .7rem; color: var(--muted); font-size: .8rem; }

  .about-portrait { overflow: hidden; padding: .7rem; }
  .about-portrait picture { overflow: hidden; border-radius: calc(var(--radius-lg) - 10px); }
  .about-portrait img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; }
  .about-portrait figcaption { padding: .8rem .55rem .15rem; color: var(--muted); font-size: .75rem; }
  .about-copy h2 { margin-block: .9rem 1.4rem; }
  .about-copy p + p { margin-block-start: 1rem; }
  .about-copy blockquote { margin-block-start: 1.8rem; padding: 1.3rem 1.4rem; border-inline-start: 3px solid var(--accent); background: var(--accent-soft); color: var(--text-strong); font-family: var(--font-display-latin); font-size: 1.25rem; line-height: 1.45; }
  html[dir="rtl"] .about-copy blockquote { font-family: var(--font-display-rtl); line-height: 1.8; }

  .career-section { background: color-mix(in srgb, var(--surface-soft) 65%, transparent); }
  .career-timeline { position: relative; max-inline-size: 980px; margin-inline: auto; }
  .career-line { position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 1px; background: var(--line); }
  .career-line span { display: block; block-size: 100%; background: linear-gradient(var(--accent), var(--brand)); transform: scaleY(0); transform-origin: top; }
  .timeline { list-style: none; }
  .timeline > li { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin-block-end: 2rem; }
  .timeline > li article { grid-column: 1; display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: 1.35rem; }
  .timeline > li:nth-child(even) article { grid-column: 3; }
  .timeline-marker { grid-column: 2; grid-row: 1; z-index: 2; display: grid; place-items: center; }
  .timeline-marker span { inline-size: 42px; block-size: 42px; display: grid; place-items: center; border: 5px solid var(--page-alt); border-radius: 50%; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; }
  .timeline article time { color: var(--accent-strong); font-family: var(--font-display-latin); font-size: 1.8rem; }
  html[dir="rtl"] .timeline article time { font-family: var(--font-body-rtl); font-size: 1.45rem; }
  .timeline-label { color: var(--accent-strong); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
  .timeline h3 { margin-block: .35rem .65rem; }
  .timeline p { font-size: .86rem; }
  .institution { display: inline-flex; margin-block-start: .8rem; padding: .38rem .65rem; border-radius: 999px; background: var(--surface-soft); color: var(--text); font-size: .68rem; }

  .certificate-slider { position: relative; }
  .certificate-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
  .certificate-toolbar p { color: var(--text-strong); font-family: var(--font-display-latin); font-size: 1.35rem; }
  html[dir="rtl"] .certificate-toolbar p { font-family: var(--font-body-rtl); }
  .certificate-controls { display: flex; gap: .45rem; }
  .slider-button { inline-size: 42px; block-size: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); cursor: pointer; }
  .slider-button:disabled { opacity: .35; cursor: not-allowed; }
  .certificate-viewport { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: inline mandatory; }
  .certificate-viewport::-webkit-scrollbar { display: none; }
  .certificate-track { display: flex; gap: 1rem; }
  .certificate-card { flex: 0 0 calc((100% - 2rem) / 3); min-inline-size: 0; overflow: hidden; padding: .65rem; scroll-snap-align: start; text-align: start; cursor: pointer; }
  .certificate-card picture { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
  .certificate-card img { inline-size: 100%; aspect-ratio: 16 / 11; object-fit: contain; }
  .certificate-meta { display: grid; min-block-size: 150px; padding: 1rem .45rem .35rem; }
  .certificate-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .certificate-meta-top small { color: var(--muted); font-size: .65rem; }
  .certificate-meta-top strong { color: var(--accent-strong); font-family: var(--font-display-latin); font-size: 1.25rem; }
  html[dir="rtl"] .certificate-meta-top strong { font-family: var(--font-body-rtl); }
  .certificate-title { margin-block: .55rem auto; color: var(--text-strong); font-size: .95rem; font-weight: 750; line-height: 1.55; }
  .certificate-view { display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: var(--brand-strong); font-size: .72rem; font-weight: 800; }
  .certificate-progress { block-size: 2px; margin-block-start: 1rem; overflow: hidden; background: var(--line); }
  .certificate-progress span { display: block; inline-size: 100%; block-size: 100%; background: var(--accent); transform: scaleX(.1); transform-origin: inline-start; transition: transform .4s var(--ease); }
  .certificate-chronology { margin-block-start: clamp(3rem, 6vw, 6rem); }
  /* The bare arrow glyph read as stray punctuation next to the heading. Giving it
     the same orb treatment as the value/philosophy cards ties it to the rest of
     the page instead of looking like an unstyled leftover. */
  .chronology-heading { display: flex; align-items: center; gap: .9rem; margin-block-end: 1.6rem; }
  .chronology-heading > span {
    flex: 0 0 auto; inline-size: 42px; block-size: 42px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-strong); font-size: .95rem;
  }
  html[dir="rtl"] .chronology-heading > span { transform: scaleX(-1); }
  .certificate-chronology ol { list-style: none; }
  .certificate-chronology li { display: grid; grid-template-columns: 100px 24px 1fr; gap: 1rem; padding-block: 1.3rem; border-block-start: 1px solid var(--line); }
  .certificate-chronology time { color: var(--accent-strong); font-family: var(--font-display-latin); font-size: 1.5rem; }
  html[dir="rtl"] .certificate-chronology time { font-family: var(--font-body-rtl); }
  .chronology-dot { inline-size: 10px; block-size: 10px; margin-block-start: .55rem; border-radius: 50%; background: var(--accent); }
  .certificate-chronology h4 { margin-block-end: .4rem; }
  .certificate-chronology p { max-inline-size: 72ch; font-size: .86rem; }
  .certificate-dialog { inline-size: min(92vw, 1000px); padding: 0; border: 0; border-radius: 22px; background: transparent; }
  .certificate-dialog::backdrop { background: rgba(2, 9, 14, .84); backdrop-filter: blur(10px); }
  .certificate-dialog-shell { position: relative; padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-strong); }
  .certificate-dialog img { inline-size: 100%; max-block-size: 78vh; object-fit: contain; border-radius: 14px; background: #fff; }
  .certificate-dialog p { padding: .8rem .3rem .1rem; color: var(--text-strong); text-align: center; }
  /* Sits over the top-inline-end corner of the image rather than in flow, so it
     never pushes the artwork down on a narrow screen. */
  .dialog-close {
    position: absolute; z-index: 2; inset-block-start: 1.4rem; inset-inline-end: 1.4rem;
    inline-size: 40px; block-size: 40px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--line); border-radius: 50%;
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    color: var(--text-strong); font-size: 1.35rem; line-height: 1; cursor: pointer;
    backdrop-filter: blur(10px); transition: background .2s ease, transform .2s ease;
  }
  .dialog-close:hover { background: var(--surface-strong); transform: scale(1.05); }
  .dialog-close { position: absolute; z-index: 2; inset-block-start: 1.5rem; inset-inline-end: 1.5rem; inline-size: 42px; block-size: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-strong); cursor: pointer; font-size: 1.4rem; }

  .service-index { position: sticky; inset-block-start: 96px; padding: 1.2rem; }
  .service-index h2 { font-family: var(--font-body-latin); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
  html[dir="rtl"] .service-index h2 { font-family: var(--font-body-rtl); letter-spacing: 0; }
  .service-index nav { display: grid; gap: .3rem; margin-block: 1rem; }
  .service-index nav a { display: flex; align-items: center; gap: .7rem; padding: .75rem; border-radius: 12px; color: var(--muted); font-size: .78rem; font-weight: 700; }
  .service-index nav a:hover { background: var(--surface-soft); color: var(--text-strong); }
  .service-index nav span { color: var(--accent-strong); font-family: var(--font-display-latin); }
  .service-index-note { padding: .9rem; border-radius: 14px; background: var(--accent-soft); }
  .service-index-note strong { color: var(--text-strong); font-size: .82rem; }
  .service-index-note p { margin-block-start: .4rem; font-size: .73rem; }
  .service-details { display: grid; gap: 1.2rem; }
  .service-detail { scroll-margin-top: 110px; padding: clamp(1.4rem, 4vw, 3rem); }
  .service-detail > header { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
  .service-detail h2 { margin-block-start: .45rem; font-size: clamp(2rem, 4vw, 3.6rem); }
  .service-detail > .lead { margin-block: 1.4rem 2rem; }
  .service-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .service-columns h3 { margin-block: 1rem .7rem; font-family: var(--font-body-latin); font-size: .95rem; }
  html[dir="rtl"] .service-columns h3 { font-family: var(--font-body-rtl); }
  .service-columns p { font-size: .86rem; }
  .check-list { display: grid; gap: .6rem; list-style: none; }
  .check-list li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; color: var(--muted); font-size: .86rem; }
  .check-list li span { color: var(--accent-strong); }
  .service-faq { margin-block: 1.6rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
  .service-faq summary { padding: 1rem 1.1rem; color: var(--text-strong); font-weight: 750; cursor: pointer; }
  .service-faq > div { padding: 0 1.1rem 1rem; }
  .service-faq h4 { margin-block: 1rem .3rem; }
  .service-faq p { font-size: .83rem; }

  .booking-panel { padding: clamp(1.3rem, 4vw, 2.5rem); }
  .form-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-block-end: 2rem; }
  .form-progress > div { position: relative; display: grid; justify-items: center; gap: .4rem; text-align: center; }
  .form-progress > div:not(:last-child)::after { content: ""; position: absolute; z-index: -1; inset-block-start: 17px; inset-inline-start: calc(50% + 22px); inline-size: calc(100% - 44px); block-size: 1px; background: var(--line); }
  .form-progress span { inline-size: 36px; block-size: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-strong); font-size: .73rem; font-weight: 800; }
  .form-progress small { color: var(--muted); font-size: .66rem; }
  .form-progress .is-active span, .form-progress .is-complete span { border-color: transparent; background: var(--accent); color: #fff; }
  .appointment-form legend { margin-block-end: 1.4rem; color: var(--text-strong); font-family: var(--font-display-latin); font-size: 2rem; font-weight: 600; }
  html[dir="rtl"] .appointment-form legend { font-family: var(--font-display-rtl); }
  .form-grid { display: grid; gap: 1rem; }
  .form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: 1 / -1; }
  .appointment-form label { display: grid; gap: .45rem; color: var(--text-strong); font-size: .76rem; font-weight: 700; }
  .appointment-form input:not([type="checkbox"]), .appointment-form select, .appointment-form textarea {
    inline-size: 100%; min-inline-size: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); color: var(--text); font-size: 16px; outline: 0;
  }
  .appointment-form input:not([type="checkbox"]), .appointment-form select { block-size: 52px; padding-inline: .9rem; }
  .appointment-form textarea { padding: .9rem; resize: vertical; }
  .appointment-form input:focus, .appointment-form select:focus, .appointment-form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 13%, transparent); background: var(--surface-strong); }
  .appointment-form input[type="date"] { min-inline-size: 0; }
  .consent-field { grid-template-columns: auto 1fr !important; align-items: start; gap: .65rem !important; margin-block-start: 1rem; }
  .consent-field input { inline-size: 19px; block-size: 19px; margin-block-start: .2rem; accent-color: var(--brand); }
  .privacy-note { margin-block-start: 1rem; padding: 1rem; border-radius: 14px; background: var(--accent-soft); }
  .privacy-note strong { color: var(--text-strong); }
  .privacy-note p { margin-block-start: .35rem; font-size: .76rem; }
  .form-actions { display: flex; justify-content: space-between; gap: .7rem; margin-block-start: 1.5rem; }
  .form-live-region { min-block-size: 1.5rem; margin-block-start: .8rem; font-size: .78rem; }
  .honeypot { position: absolute; inset-inline-start: -9999px; }
  .status-message { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin-block-end: 1.5rem; padding: 1rem; border-radius: 14px; }
  .status-success { background: color-mix(in srgb, var(--success) 12%, transparent); }
  .status-error { background: color-mix(in srgb, var(--danger) 12%, transparent); }
  .status-message > span { inline-size: 34px; block-size: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-strong); }
  .status-message h2 { font-family: var(--font-body-latin); font-size: 1rem; }
  html[dir="rtl"] .status-message h2 { font-family: var(--font-body-rtl); }
  .contact-panel { display: grid; gap: 1rem; }
  .contact-card { padding: 1.3rem; }
  .contact-card h2 { margin-block: .7rem 1rem; font-size: 1.55rem; }
  .contact-card address { margin-block-end: 1rem; font-size: .83rem; }
  .contact-card > a { display: flex; align-items: center; gap: .55rem; padding-block: .55rem; color: var(--brand-strong); font-size: .78rem; font-weight: 750; overflow-wrap: anywhere; }
  .contact-card ol { display: grid; gap: .7rem; list-style: none; }
  .contact-card li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; color: var(--muted); font-size: .8rem; }
  .contact-card li span { color: var(--accent-strong); }

  .case-card { overflow: hidden; }
  .before-after { --position: 50%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-soft); }
  .before-after > img, .after-layer img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .after-layer { position: absolute; inset: 0; inline-size: 100%; overflow: hidden; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
  html[dir="rtl"] .after-layer { clip-path: inset(0 0 0 calc(100% - var(--position))); }
  .after-layer img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .slider-line { position: absolute; inset-block: 0; inset-inline-start: var(--position); inline-size: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); pointer-events: none; }
  .slider-line span { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 40px; block-size: 40px; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: #123244; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
  .before-after input { position: absolute; z-index: 4; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: ew-resize; }
  .case-label { position: absolute; z-index: 2; inset-block-start: 1rem; padding: .35rem .65rem; border-radius: 999px; background: rgba(7,19,29,.7); color: #fff; font-size: .68rem; font-weight: 800; }
  .before-label { inset-inline-start: 1rem; }
  .after-label { inset-inline-end: 1rem; }
  .case-copy { padding: 1.4rem; }
  .case-copy > span { color: var(--accent-strong); font-size: .67rem; font-weight: 800; text-transform: uppercase; }
  .case-copy h3 { margin-block: .5rem .7rem; }
  .case-copy p { font-size: .86rem; }
  .case-copy small { display: block; margin-block-start: .8rem; color: var(--muted); font-size: .66rem; }
  .gallery-process { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 3rem; padding: clamp(1.5rem, 5vw, 4rem); }
  .gallery-process h2 { margin-block: .7rem 1rem; }
  .gallery-process ol { display: grid; gap: .7rem; list-style: none; }
  .gallery-process li { display: grid; grid-template-columns: 42px 1fr; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
  .gallery-process li > span { inline-size: 42px; block-size: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; }
  .gallery-process h3 { font-size: 1rem; }
  .gallery-process p { margin-block-start: .25rem; font-size: .8rem; }

  .blog-card { overflow: hidden; }
  .blog-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .article-visual { min-block-size: 270px; display: grid; place-items: center; background: radial-gradient(circle at 20% 18%, var(--accent-soft), transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, transparent), var(--surface-soft)); }
  .article-visual span { inline-size: 92px; block-size: 92px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 28px; background: var(--surface); color: var(--brand-strong); font-size: 1.4rem; font-weight: 800; }
  .blog-copy { padding: 1.5rem; }
  .article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted); font-size: .68rem; }
  .article-meta span:first-child { color: var(--accent-strong); font-weight: 800; }
  .blog-copy h2 { margin-block: .7rem 1rem; font-size: clamp(1.8rem, 3.2vw, 3rem); }
  .blog-copy p { margin-block-end: 1.2rem; font-size: .88rem; }
  .article-header { background: var(--surface-onyx); }
  .article-header-inner { max-inline-size: 900px; }
  .article-header .text-link, .article-header h1 { color: #fff; }
  .article-header .article-meta, .article-header p { color: rgba(255,255,255,.65); }
  .article-header h1 { max-inline-size: 14ch; margin-block: 1.4rem 1.2rem; }
  .article-content { padding: clamp(1.4rem, 4vw, 3.5rem); }
  .article-content section + section { margin-block-start: 2.4rem; padding-block-start: 2rem; border-block-start: 1px solid var(--line); }
  .article-content h2 { margin-block-end: 1rem; font-size: clamp(1.9rem, 3vw, 2.8rem); }
  .article-content p + p { margin-block-start: .9rem; }
  .article-content .check-list { margin-block-start: 1rem; }
  .article-disclaimer { margin-block-start: 2.5rem; padding: 1rem; border-radius: 14px; background: var(--accent-soft); }
  .article-disclaimer strong { color: var(--text-strong); }
  .article-disclaimer p { margin-block-start: .3rem; font-size: .78rem; }
  .article-sidebar { position: sticky; inset-block-start: 96px; padding: 1.4rem; }
  .article-sidebar h2 { margin-block: .7rem 1rem; font-size: 2rem; }
  .article-sidebar p { margin-block-end: 1.3rem; font-size: .82rem; }

  .site-footer { position: relative; z-index: 1; padding-block: 2rem 6rem; }
  .footer-grid { padding: clamp(1.5rem, 4vw, 3rem); }
  .footer-brand p { max-inline-size: 34ch; margin-block-start: 1rem; font-size: .82rem; }
  .footer-grid h2 { margin-block-end: .8rem; font-family: var(--font-body-latin); font-size: .73rem; letter-spacing: .12em; text-transform: uppercase; }
  html[dir="rtl"] .footer-grid h2 { font-family: var(--font-body-rtl); letter-spacing: 0; }
  .footer-grid nav, .footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; }
  .footer-grid nav a, .footer-grid > div > a:not(.button) { padding-block: .34rem; color: var(--muted); font-size: .76rem; }
  .footer-grid address { font-size: .76rem; }
  .footer-grid .button { margin-block-start: 1rem; }
  .footer-social-link { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .5rem; color: var(--brand-strong) !important; overflow-wrap: anywhere; }
  .footer-bottom { display: flex; justify-content: space-between; gap: 1.5rem; padding-block-start: 1rem; }
  .footer-bottom small { color: var(--muted); font-size: .65rem; }
  .mobile-booking-bar { display: none; }

  .not-found-page { min-block-size: 70vh; display: grid; align-items: center; }
  .not-found { max-inline-size: 720px; margin-inline: auto; padding: clamp(2rem, 6vw, 5rem); text-align: center; }
  .not-found > span { color: var(--accent-strong); font-family: var(--font-display-latin); font-size: 6rem; line-height: 1; }
  .not-found h1 { margin-block: 1rem; }
  .not-found p { margin-block-end: 1.4rem; }
}

@layer motion {
  .interactive-card { transition: transform .28s var(--ease), border-color .25s ease, box-shadow .25s ease; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
  .interactive-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
  .magnetic { translate: var(--magnetic-x, 0) var(--magnetic-y, 0); }
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease) var(--reveal-delay, 0ms), transform .75s var(--ease) var(--reveal-delay, 0ms); }
  .js [data-reveal="left"] { transform: translateX(-34px); }
  .js [data-reveal="right"] { transform: translateX(34px); }
  html[dir="rtl"] .js [data-reveal="left"] { transform: translateX(34px); }
  html[dir="rtl"] .js [data-reveal="right"] { transform: translateX(-34px); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  .split-word { display: inline-block; opacity: 0; transform: translateY(.4em); animation: word-in .65s var(--ease) forwards; animation-delay: calc(.05s * var(--word-index)); }
  .scroll-progress { position: fixed; z-index: 200; inset-block-start: 0; inset-inline: 0; block-size: 2px; pointer-events: none; }
  .scroll-progress span { display: block; inline-size: 100%; block-size: 100%; background: linear-gradient(90deg, var(--accent), var(--brand)); transform: scaleX(0); transform-origin: inline-start; }
  .page-transition { position: fixed; z-index: 999; inset: 0; pointer-events: none; }
  .page-transition span { position: absolute; inset: 0; background: var(--page); transform: scaleY(0); transform-origin: bottom; }
  body.page-leaving .page-transition span { animation: page-cover .32s var(--ease) forwards; }
  .cursor-aura { position: fixed; z-index: 0; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle 240px at var(--cursor-x) var(--cursor-y), color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%); transition: opacity .2s ease; }
  .cursor-aura.is-visible { opacity: 1; }
  [data-parallax-layer] { translate: var(--parallax-x, 0) var(--parallax-y, 0); transition: translate .18s ease-out; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @keyframes word-in { to { opacity: 1; transform: none; } }
  @keyframes page-cover { to { transform: scaleY(1); } }
}

@layer responsive {
  @media (max-width: 1100px) {
    :root { --shell: 980px; }
    .header-booking-button { display: none; }
    .primary-nav { position: fixed; z-index: 90; inset-block-start: 86px; inset-inline: 1.25rem; display: grid; justify-content: stretch; gap: .3rem; max-block-size: calc(100svh - 104px); overflow-y: auto; padding: .8rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-strong); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
    .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
    .primary-nav a { min-block-size: 50px; display: flex; align-items: center; padding-inline: 1rem; border-radius: 13px; font-size: .95rem; }
    .nav-toggle { display: inline-grid; }
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr); gap: 3rem; }
    .floating-badge { min-inline-size: 120px; }
    .badge-one { inset-inline-start: -1rem; }
    .badge-two { inset-inline-end: -1rem; }
    .philosophy-grid, .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-layout { grid-template-columns: 240px minmax(0, 1fr); }
    .booking-grid { grid-template-columns: minmax(0, 1fr) 290px; }
    .footer-grid { grid-template-columns: 1.3fr repeat(3, minmax(0, .8fr)); gap: 1.5rem; }
  }

  @media (max-width: 860px) {
    :root { --radius-lg: 28px; --radius-md: 20px; }
    .section { padding-block: clamp(4rem, 10vw, 6rem); }
    .split-heading, .page-hero-grid, .hero-grid, .about-grid, .feature-grid, .booking-grid, .article-layout, .gallery-process { grid-template-columns: 1fr; }
    .split-heading > p { justify-self: start; }
    .hero { min-block-size: auto; padding-block-start: 4rem; }
    .hero-copy { max-inline-size: 720px; }
    .hero-visual { inline-size: min(100%, 610px); margin-inline: auto; }
    .portrait-card { max-inline-size: 540px; }
    .floating-badge { position: static; display: inline-block; margin-block-start: .7rem; margin-inline-end: .5rem; }
    .hero-scroll-cue { display: none; }
    .value-grid, .services-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doctor-feature .feature-grid { grid-template-columns: .72fr 1fr; }
    .page-hero-stat { min-block-size: 160px; }
    .career-line { inset-inline-start: 22px; }
    html[dir="rtl"] .career-line { inset-inline-start: auto; inset-inline-end: 22px; }
    /* Numbered grid-column placement is already direction-aware — line 1 sits
       at the inline-start edge, which the browser flips to the right side under
       dir="rtl" on its own. The html[dir="rtl"] override this block used to
       carry re-swapped marker/article back to columns 2/1, undoing that native
       mirroring: the result was the 44px marker column stretching to fit the
       whole article (heading, paragraph, institution line) while the 42px
       marker circle sat lost inside the leftover 1fr track. Removing the
       override lets the grid mirror correctly on its own, matching the
       already-logical career-line position below. */
    .timeline > li, .timeline > li:nth-child(even) { grid-template-columns: 44px 1fr; gap: .8rem; }
    .timeline-marker { grid-column: 1; }
    .timeline > li article, .timeline > li:nth-child(even) article { grid-column: 2; }
    .certificate-card { flex-basis: calc((100% - 1rem) / 2); }
    .services-layout { grid-template-columns: 1fr; }
    .service-index { position: static; }
    .service-index nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-sidebar { position: static; }
    .blog-card-featured { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 620px) {
    :root { --header-h: 68px; }
    .shell { inline-size: min(calc(100% - 1.2rem), var(--shell)); }
    .section { padding-block: 4rem; }
    .section-tight { padding-block-start: .8rem; }
    h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
    h2 { font-size: clamp(2.15rem, 10vw, 3.2rem); }
    html[dir="rtl"] h1 { font-size: clamp(2.4rem, 11.5vw, 3.7rem); line-height: 1.42; }
    html[dir="rtl"] h2 { font-size: clamp(2rem, 9.8vw, 3rem); line-height: 1.45; }
    .site-header { padding-block: .35rem; }
    .header-shell { min-block-size: 62px; gap: .4rem; padding: .4rem .45rem .4rem .55rem; border-radius: 17px; }
    html[dir="rtl"] .header-shell { padding: .4rem .55rem .4rem .45rem; }
    .brand { gap: .48rem; min-inline-size: 0; }
    .brand img { inline-size: 38px; block-size: 38px; }
    .brand-copy strong { max-inline-size: 116px; font-size: .76rem; }
    .brand-copy span { display: none; }
    .header-actions { gap: .28rem; }
    .icon-button { inline-size: 39px; block-size: 39px; }
    .language-button { min-inline-size: 46px; padding-inline: .35rem; }
    /* The flag now carries the meaning, so the chevron and the redundant text
       code both go and the control collapses to a single clear glyph. */
    .language-chevron, .language-button .language-code { display: none; }
    .primary-nav { inset-block-start: 72px; inset-inline: .6rem; max-block-size: calc(100svh - 84px); }
    .language-menu { position: fixed; inset-block-start: 72px; inset-inline: .6rem; min-inline-size: 0; }
    .hero { padding-block-start: 3.2rem; }
    .hero-copy h1 { margin-block: .75rem 1rem; }
    .hero-actions { display: grid; grid-template-columns: 1fr; margin-block-start: 1.35rem; }
    .hero-actions .button { inline-size: 100%; }
    .trust-list { display: grid; gap: .55rem; margin-block-start: 1.2rem; }
    .hero-visual { margin-block-start: 1.7rem; }
    .portrait-card { padding: .45rem; border-radius: 22px; }
    .portrait-card picture { border-radius: 17px; }
    .portrait-caption { inset-inline: .85rem; inset-block-end: .85rem; display: grid; gap: .15rem; padding: .7rem .8rem; }
    .portrait-caption span { text-align: start; }
    .floating-badge { inline-size: calc(50% - .5rem); min-inline-size: 0; margin-inline: 0 .45rem; padding: .75rem; vertical-align: top; }
    html[dir="rtl"] .floating-badge { margin-inline: 0 .45rem; }
    .floating-badge strong { font-size: 1.5rem; }
    .floating-badge span { font-size: .61rem; }
    .signature-metric { min-inline-size: 210px; padding: 1rem 1.3rem; }
    .value-grid, .services-grid, .philosophy-grid, .process-grid, .blog-grid, .contact-panel { grid-template-columns: 1fr; }
    .icon-card, .process-grid li, .philosophy-grid article { min-block-size: 0; }
    .service-card { min-block-size: 0; grid-template-columns: 42px 1fr; padding: 1.15rem; }
    .doctor-feature .feature-grid { grid-template-columns: 1fr; padding: .65rem; }
    .feature-image img { aspect-ratio: 5 / 4; object-position: center 22%; }
    .feature-copy { padding: 1rem .7rem 1.3rem; }
    .credential-mini-grid { grid-template-columns: 1fr; }
    .cta-panel { grid-template-columns: 1fr; padding: 1.5rem; }
    .cta-panel .button { inline-size: 100%; }
    .page-hero { padding-block-start: 3.6rem; }
    .page-hero-stat { min-block-size: 130px; }
    .about-portrait { padding: .45rem; }
    .timeline > li article, .timeline > li:nth-child(even) article { grid-template-columns: 1fr; padding: 1rem; }
    .timeline-marker span { inline-size: 36px; block-size: 36px; border-width: 4px; }
    .career-line { inset-inline-start: 18px; }
    html[dir="rtl"] .career-line { inset-inline-start: auto; inset-inline-end: 18px; }
    .timeline > li, .timeline > li:nth-child(even) { grid-template-columns: 36px 1fr; }
    .certificate-card { flex-basis: 86vw; }
    .certificate-controls [data-slider-toggle] { display: none; }
    .certificate-chronology li { grid-template-columns: 70px 16px 1fr; gap: .6rem; }
    .certificate-dialog { inline-size: 96vw; }
    .service-index nav { grid-template-columns: 1fr; }
    .service-detail { padding: 1.15rem; }
    .service-detail > header { gap: .7rem; }
    .service-detail h2 { font-size: 2.25rem; }
    html[dir="rtl"] .service-detail h2 { font-size: 2rem; }
    .service-detail .service-number { font-size: 1.6rem; }
    .service-columns { grid-template-columns: 1fr; gap: .2rem; }
    .form-grid.two-columns { grid-template-columns: 1fr; }
    .form-actions { display: grid; grid-template-columns: 1fr; }
    .form-actions .button { inline-size: 100%; }
    .booking-panel { padding: 1rem; }
    .form-progress small { font-size: .58rem; }
    .before-after { aspect-ratio: 4 / 3; }
    .gallery-process { padding: 1.2rem; }
    .article-visual { min-block-size: 220px; }
    .article-content { padding: 1.2rem; }
    .footer-grid { grid-template-columns: 1fr; padding: 1.2rem; }
    .footer-bottom { display: grid; gap: .45rem; padding-inline: .3rem; }
    .site-footer { padding-block-end: 6.5rem; }
    .mobile-booking-bar { position: fixed; z-index: 80; inset-inline: .6rem; inset-block-end: calc(.6rem + env(safe-area-inset-bottom)); min-block-size: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1.1rem; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--brand-strong) 94%, transparent); color: #fff; box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); font-size: .85rem; font-weight: 800; }
    html[data-theme="dark"] .mobile-booking-bar { background: color-mix(in srgb, var(--accent) 92%, transparent); color: #10212a; }
  }

  @media (max-width: 390px) {
    .brand-copy { display: none; }
    .floating-badge { inline-size: 100%; margin: .45rem 0 0; }
    .certificate-card { flex-basis: 90vw; }
    .certificate-chronology li { grid-template-columns: 1fr; }
    .chronology-dot { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .signature-strip-track { animation: none; }
    .cursor-aura, .page-transition { display: none; }
    .js [data-reveal] { opacity: 1; transform: none; }
    .split-word { opacity: 1; transform: none; }
  }

  @media print {
    .site-header, .site-footer, .mobile-booking-bar, .ambient, .scroll-progress, .page-transition, .certificate-controls { display: none !important; }
    body { background: #fff; color: #000; }
    .glass-panel, .glass-card { background: #fff; box-shadow: none; border-color: #bbb; }
  }
}

@layer utilities {
  .visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
}

/* V5.1 mobile refinement: compact, overflow-safe and touch-first */
@layer responsive {
  @media (max-width: 620px) {
    body { font-size: .97rem; }
    .shell { inline-size: min(calc(100% - 1rem), var(--shell)); }
    h1 { font-size: clamp(2.25rem, 10.8vw, 3.35rem); line-height: 1.06; }
    h2 { font-size: clamp(1.9rem, 8.8vw, 2.7rem); line-height: 1.12; }
    html[dir="rtl"] h1 { font-size: clamp(2.12rem, 10vw, 3.15rem); line-height: 1.38; }
    html[dir="rtl"] h2 { font-size: clamp(1.85rem, 8.5vw, 2.55rem); line-height: 1.42; }
    .section { padding-block: 3.35rem; }
    .section-heading { margin-block-end: 1.65rem; }
    .section-heading.centered { text-align: start; }
    .section-heading.centered p { margin-inline: 0; }
    .hero { padding-block-start: 2.35rem; }
    .hero-grid { gap: 0; }
    .hero-copy h1,
    html[dir="rtl"] .hero-copy h1,
    .page-hero h1,
    .article-header h1 { max-inline-size: 100%; }
    .hero-copy .lead { font-size: .98rem; line-height: 1.78; }
    html[dir="rtl"] .hero-copy .lead { line-height: 1.9; }
    .trust-list li { font-size: .75rem; }
    .hero-visual {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .55rem;
      inline-size: 100%;
      margin-block-start: 1.35rem;
    }
    .portrait-card { grid-column: 1 / -1; inline-size: 100%; }
    .portrait-card img { block-size: auto; }
    .portrait-caption { inset-inline: .8rem; inset-block-end: .8rem; }
    .floating-badge,
    html[dir="rtl"] .floating-badge {
      position: static;
      inline-size: auto;
      min-inline-size: 0;
      margin: 0;
      padding: .8rem;
    }
    .floating-badge strong { font-size: 1.35rem; }
    html[dir="rtl"] .floating-badge strong { font-size: 1.2rem; }
    .floating-badge span { font-size: .62rem; line-height: 1.55; }
    .signature-strip { margin-block-start: .3rem; }
    .signature-metric { min-inline-size: 190px; padding: .85rem 1rem; }
    .icon-card,
    .process-grid li,
    .philosophy-grid article,
    .service-card,
    .service-detail,
    .contact-card,
    .case-copy,
    .blog-copy { padding: 1rem; }
    .service-card { grid-template-columns: 34px minmax(0, 1fr); gap: .75rem; }
    .service-number { font-size: 1.55rem; }
    .page-hero { padding-block-start: 2.8rem; }
    .page-hero-stat { min-block-size: 108px; padding: 1rem; }
    .page-hero-stat strong { font-size: 2rem; }
    .service-index { overflow: hidden; padding: .85rem; }
    .service-index nav {
      display: flex;
      gap: .45rem;
      overflow-x: auto;
      margin-block: .8rem;
      padding-block-end: .25rem;
      scroll-snap-type: inline mandatory;
      scrollbar-width: none;
    }
    .service-index nav::-webkit-scrollbar { display: none; }
    .service-index nav a {
      flex: 0 0 auto;
      min-inline-size: max-content;
      padding: .7rem .8rem;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      scroll-snap-align: start;
    }
    .certificate-card { flex-basis: calc(100% - .25rem); }
    .certificate-meta { min-block-size: 128px; }
    .certificate-toolbar { align-items: flex-end; }
    .certificate-toolbar p { font-size: 1.05rem; }
    .certificate-chronology li { padding-block: 1rem; }
    .booking-panel { padding: .9rem; }
    .form-progress { margin-block-end: 1.4rem; }
    .appointment-form legend { font-size: 1.65rem; }
    .article-content { padding: 1rem; }
    .mobile-booking-bar { inset-inline: .5rem; inset-block-end: calc(.5rem + env(safe-area-inset-bottom)); }
    .js [data-reveal="left"],
    .js [data-reveal="right"] { transform: translateY(18px); }
    .js [data-reveal="left"].is-visible,
    .js [data-reveal="right"].is-visible { transform: none; }
  }

  @media (max-width: 430px) {
    .brand-copy { display: none; }
    .header-shell { grid-template-columns: auto 1fr; }
    .header-actions { justify-self: end; }
    .icon-button { inline-size: 38px; block-size: 38px; }
    .language-button { min-inline-size: 43px; }
    .portrait-caption { position: static; margin-block-start: .45rem; background: var(--surface-onyx); }
    .portrait-caption span { text-align: start; }
    .service-detail h2 { font-size: 1.85rem; }
    html[dir="rtl"] .service-detail h2 { font-size: 1.75rem; }
    .certificate-chronology li { grid-template-columns: 60px 12px minmax(0, 1fr); }
    .mobile-booking-bar { font-size: .8rem; }
  }
}

/* Merged multilingual FAQ experience */
.faq-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,6vw,6rem);align-items:start}.faq-layout .section-heading{position:sticky;top:8rem}.faq-list{display:grid;gap:.85rem}.faq-item{overflow:hidden;padding:0}.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 1.5rem;font-weight:700}.faq-item summary::-webkit-details-marker{display:none}.faq-plus{display:grid;place-items:center;flex:0 0 2rem;width:2rem;height:2rem;border-radius:999px;background:var(--surface-strong);transition:transform .25s ease}.faq-item[open] .faq-plus{transform:rotate(45deg)}.faq-answer{padding:0 1.5rem 1.4rem}.faq-answer p{margin:0;color:var(--muted);line-height:1.8}@media(max-width:820px){.faq-layout{grid-template-columns:1fr}.faq-layout .section-heading{position:static}}

/* ---------------------------------------------------------------------------
   V6 mobile pass. Fixes behaviour bugs first (scroll trapping, anchors hidden
   under the sticky header, sub-44px touch targets), then tightens the visual
   rhythm. Kept as one trailing layer so the mobile story lives in one place
   instead of being spread across the three earlier max-width blocks.
   --------------------------------------------------------------------------- */
@layer responsive {
  /* Anchors (#service keys, #cases-title, skip-link) scrolled to the very top of
     the viewport, landing underneath the sticky header. Applies at every width. */
  :where([id]) { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

  @media (hover: none) {
    /* Hover-only affordances either stick on first tap or never fire on touch,
       so the lift/aura effects are pointless here and the aura repaints on scroll. */
    .cursor-aura { display: none; }
    .button:hover, .header-booking-button:hover, .icon-button:hover { transform: none; }
  }

  @media (max-width: 620px) {
    /* Every editorial image was locked to a 4:5 portrait crop. At ~360px wide
       that renders ~450px tall — the photo alone filled most of the viewport and
       pushed all copy below the fold. Squaring them off roughly halves the
       height; object-position already keeps the face in frame. */
    .portrait-card img,
    .about-portrait img { aspect-ratio: 1 / 1; }
    /* Square, but not full-bleed: at ~360px wide a 1:1 image is still ~350px
       tall and pushes the bio out of view. Capping the figure keeps the ratio
       and shrinks the footprint instead of re-cropping the photo. */
    .about-portrait { max-inline-size: min(48%, 190px); margin-inline: auto; }
    /* Square crop, matching the hero and about portraits so all three editorial
       images share one shape on mobile. */
    .feature-image img {
      aspect-ratio: 1 / 1;
      block-size: auto;
      object-fit: cover;
      object-position: center 18%;
    }
    .doctor-feature .feature-grid { gap: .9rem; padding: .5rem; }
    .feature-copy { padding: .9rem .6rem 1.1rem; }
    .portrait-card { max-inline-size: none; }

    /* Fixed min-heights reserved dead space under content that is only two or
       three short lines once it stacks. */
    .certificate-meta { min-block-size: 0; padding-block-end: .2rem; }
    .article-visual { min-block-size: 148px; }
    .article-visual span { inline-size: 68px; block-size: 68px; border-radius: 20px; font-size: 1.1rem; }

    /* The invisible full-bleed range input sat on top of the whole image and
       swallowed vertical swipes, so the page could not be scrolled past a case
       card. pan-y hands vertical gestures back to the document. */
    .before-after input { touch-action: pan-y; }
    .before-after { aspect-ratio: 3 / 2; }
    .slider-line span { inline-size: 34px; block-size: 34px; }

    /* WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable iOS/Android
       target. The header controls were sitting at 38-39px. */
    .icon-button { inline-size: 44px; block-size: 44px; }
    .language-button { min-inline-size: 52px; }
    .nav-toggle span { inline-size: 20px; }
    .primary-nav a { min-block-size: 52px; }
    .language-menu a { padding-block: .85rem; }
    .text-link { padding-block: .35rem; }

    /* Header was 4 controls + brand on one row; at ~360px they collided. */
    .header-shell { gap: .3rem; }
    .brand img { inline-size: 36px; block-size: 36px; }

    /* Long clinical terms and email addresses overflowed their cards in de/fa/ar. */
    body { overflow-wrap: break-word; }
    .contact-card > a, .article-content, .faq-answer p, .case-copy p { overflow-wrap: anywhere; }

    /* Cards were reading as a wall of equal-weight blocks; tighten the interior
       rhythm so the heading hierarchy survives at small sizes. */
    .section-heading p { font-size: .92rem; }
    .icon-card h3, .process-grid h3, .philosophy-grid h3 { margin-block: 1.1rem .5rem; }
    .icon-orb { inline-size: 42px; block-size: 42px; }
    .card-index { font-size: 2.4rem; }
    .value-grid, .services-grid, .philosophy-grid, .process-grid, .blog-grid { gap: .75rem; }
    .case-grid, .contact-panel { gap: .8rem; }

    /* 16px keeps iOS from zooming the viewport on focus; the label/hint pair was
       cramped once the fields stacked. */
    .appointment-form label { gap: .35rem; font-size: .8rem; }
    .appointment-form input:not([type="checkbox"]), .appointment-form select { block-size: 50px; }
    .form-grid { gap: .85rem; }
    .consent-field { align-items: center; }

    /* The fixed booking bar overlapped the last card on short pages. */
    .site-footer { padding-block-end: 7rem; }

    /* Two earlier blocks disagreed: <=390px hides the dot while a later <=430px
       rule still reserved its 12px column, leaving a dead gap before the text.
       Drop the dot column outright and let the year sit above the entry. */
    .certificate-chronology li,
    .certificate-chronology li:nth-child(even) { grid-template-columns: 1fr; gap: .3rem; }
    .chronology-dot { display: none; }
    .certificate-chronology time { font-size: 1.15rem; }
    .chronology-heading { gap: .7rem; }
    .chronology-heading > span { inline-size: 36px; block-size: 36px; font-size: .85rem; }

    .faq-item summary { gap: 1rem; padding: 1.1rem 1.15rem; font-size: .95rem; }
    .faq-answer { padding: 0 1.15rem 1.15rem; }
    .certificate-dialog { inline-size: 94vw; }
    .certificate-dialog img { max-block-size: 68vh; }
    .certificate-dialog-shell { padding: .6rem; }
    .dialog-close { inline-size: 44px; block-size: 44px; }
  }

  @media (max-width: 430px) {
    .shell { inline-size: min(calc(100% - .85rem), var(--shell)); }
    .header-shell { padding: .35rem .4rem; }
    html[dir="rtl"] .header-shell { padding: .35rem .4rem; }
    .icon-button { inline-size: 42px; block-size: 42px; }
    .header-actions { gap: .22rem; }
    .signature-metric { min-inline-size: 172px; padding: .8rem .9rem; }
    .signature-metric strong { font-size: 1.45rem; }
    .page-hero-stat { min-block-size: 96px; }
    .timeline article time { font-size: 1.55rem; }
    .footer-bottom small { font-size: .62rem; }
  }
}