@font-face {
  font-family: "Khalimat Arabic";
  src: url("./reem-kufi.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  font-family: "Century Gothic", "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
a { color: inherit; }
/* Kept focusable: labels activate real radio/checkbox controls even without JS. */
.state-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  clip-path: inset(50%);
}
.site-shell {
  --page: #ffffff;
  --ink: #111111;
  --muted: #60605e;
  --glass: linear-gradient(160deg, rgba(255,255,255,.96), rgba(245,245,244,.76));
  --button-shadow: 0 2px 4px rgba(20,23,28,.035), 0 7px 17px rgba(20,23,28,.075), 0 18px 36px -17px rgba(20,23,28,.13), inset 0 1px 1px rgba(255,255,255,1);
  --selected-bg: linear-gradient(145deg,#323232,#101010);
  --selected-ink: #fff;
  --selected-shadow: 0 3px 7px rgba(0,0,0,.15), 0 9px 18px -9px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.2);
  --gutter: clamp(30px, 9.8vw, 188px);
  position: relative;
  min-width: 320px;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 350px;
  isolation: isolate;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  transition: background-color .35s ease, color .3s ease;
}
.site-header {
  position: absolute;
  z-index: 5;
  top: max(24px, env(safe-area-inset-top, 0px));
  left: clamp(24px,4.3vw,76px);
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: 0 5px 14px rgba(0,0,0,.035), 0 20px 45px -22px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.brand-home {
  cursor: default;
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: white;
  box-shadow: var(--selected-shadow);
}
.brand-home img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.language-switcher { display: flex; align-items: center; gap: 2px; }
.language-option, .contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.language-option {
  gap: 5px;
  min-width: 56px;
  min-height: 44px;
  padding: 8px;
  font-size: 11px;
  color: var(--muted);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.flag { display: block; width: 17px; height: 17px; border-radius: 50%; flex: none; pointer-events: none; }
#language-en:checked ~ .site-shell [for="language-en"],
#language-ru:checked ~ .site-shell [for="language-ru"],
#language-ar:checked ~ .site-shell [for="language-ar"] {
  background: var(--selected-bg);
  color: var(--selected-ink);
  box-shadow: var(--selected-shadow);
}
#language-en:focus-visible ~ .site-shell [for="language-en"],
#language-ru:focus-visible ~ .site-shell [for="language-ru"],
#language-ar:focus-visible ~ .site-shell [for="language-ar"],
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.coming-soon { position: relative; width: 100%; height: 100%; }
.content {
  position: absolute;
  z-index: 2;
  top: 51%;
  left: var(--gutter);
  width: 43%;
  max-width: 680px;
  transform: translateY(-42%);
  display: none;
  grid-template-columns: minmax(0,1fr);
  align-items: start;
  text-align: left;
}
#language-en:checked ~ .site-shell .content-en,
#language-ru:checked ~ .site-shell .content-ru,
#language-ar:checked ~ .site-shell .content-ar { display: grid; }
.overline {
  margin: 0 0 clamp(22px,4.4vh,46px);
  font-size: clamp(11px,1.05vw,16px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: .32em;
}
.name { margin: 0; line-height: 1.08; font-weight: 400; min-width: 0; }
.name-line { display: block; }
.name-first, .name-last { display: inline-block; white-space: nowrap; }
.name-first { font-size: clamp(48px,5.35vw,88px); font-weight: 700; letter-spacing: -.065em; line-height: 1.06; }
.name-last { margin-top: .11em; font-size: clamp(35px,3.8vw,61px); font-weight: 400; letter-spacing: .125em; line-height: 1.15; }
.speciality {
  margin: clamp(22px,3.6vh,38px) 0 0;
  font-size: clamp(10px,1.06vw,16px);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.7;
  letter-spacing: .24em;
}
.contacts { display: flex; align-items: stretch; gap: 16px; margin: clamp(30px,5.5vh,60px) 0 0; padding: 0; }
.contact-link {
  min-height: 48px;
  padding: 14px 22px;
  background: var(--glass);
  box-shadow: var(--button-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: clamp(12px,1.05vw,16px);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: transform .22s ease, box-shadow .22s ease, background .3s ease;
  /* No clipped reveal on interactive elements: the entire shadow can render. */
}
@media (hover:hover) {
  .contact-link:hover { transform: translateY(-2px); }
  .language-option:hover { color: var(--ink); }
}
.contact-link:active { transform: translateY(1px) scale(.985); }
/* The frame trims empty background around the source, not her hair or hands. */
.portrait {
  position: absolute;
  z-index: 1;
  right: 3.8%;
  bottom: clamp(0px, calc((100vh - 600px) * .14), 70px);
  bottom: clamp(0px, calc((100dvh - 600px) * .14), 70px);
  width: min(44vw, 80vh, 720px);
  width: min(44vw, 80dvh, 720px);
  aspect-ratio: 100 / 115;
  pointer-events: none;
  overflow: hidden;
  animation: portrait-enter 1.15s cubic-bezier(.22,1,.36,1) both;
}
.portrait img { position: absolute; display: block; left: 0; top: -19%; width: 100%; height: auto; max-width: none; transition: opacity .35s ease; }
.portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right,var(--page),transparent 5%,transparent 95%,var(--page)), linear-gradient(to bottom,var(--page),transparent 2%,transparent 96%,var(--page)); }
.content-ru .name-first { font-size: clamp(45px,5vw,82px); }
.content-ru .name-last { font-size: clamp(34px,3.6vw,59px); letter-spacing: .105em; }
.content-ru .speciality { max-width: 460px; font-size: clamp(10px,.95vw,14px); letter-spacing: .13em; }
.content-ru .contact-link { padding-inline: 18px; }
.content-ar { font-family: "Khalimat Arabic", Tahoma, sans-serif; text-align: right; }
.content-ar .overline { font-size: clamp(14px,1.2vw,19px); letter-spacing: 0; }
.content-ar .name-first { font-size: clamp(46px,4.4vw,72px); letter-spacing: 0; line-height: 1.38; }
.content-ar .name-last { font-size: clamp(34px,3.3vw,54px); letter-spacing: 0; line-height: 1.5; margin-top: 0; }
.content-ar .speciality { font-size: clamp(14px,1.35vw,21px); letter-spacing: 0; }
.content-ar .contacts { justify-content: flex-start; }
.content-ar .contact-link { font-size: clamp(12px,1.05vw,17px); }
.reveal { animation: text-reveal .95s cubic-bezier(.22,1,.36,1) both; }
.reveal-first { animation-delay: .08s; }
.reveal-second { animation-delay: .2s; }
.reveal-third { animation-delay: .33s; }
.reveal-fourth { animation-delay: .45s; }
.content-ar .reveal { animation-name: text-reveal-rtl; }
@keyframes text-reveal {
  from { opacity: 0; clip-path: inset(-15% 100% -20% -10%); transform: translateX(-10px); }
  to { opacity: 1; clip-path: inset(-15% -10% -20% -10%); transform: translateX(0); }
}
@keyframes text-reveal-rtl {
  from { opacity: 0; clip-path: inset(-15% -10% -20% 100%); transform: translateX(10px); }
  to { opacity: 1; clip-path: inset(-15% -10% -20% -10%); transform: translateX(0); }
}
@keyframes portrait-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width:701px) and (max-width:1100px) {
  .site-shell { --gutter: 6vw; }
  .content { width: 47%; }
  .portrait { right: 1%; width: min(48vw,80dvh); }
  .name-first { font-size: 5.7vw; }
  .name-last { font-size: 4.1vw; }
  .speciality { font-size: 10px; letter-spacing: .18em; }
  .contacts { gap: 10px; }
  .contact-link { padding-inline: 16px; font-size: 12px; }
  .content-ru .name-first { font-size: 5.4vw; }
  .content-ru .name-last { font-size: 3.9vw; }
  .content-ru .contact-link { padding-inline: 12px; font-size: 10px; }
  .content-ar .name-first { font-size: 4.8vw; }
  .content-ar .name-last { font-size: 3.6vw; }
}
@media (max-width:700px) {
  .site-shell { --gutter: clamp(20px,5.6vw,34px); }
  .site-header {
    top: calc(env(safe-area-inset-top,0px) + 14px);
    left: 14px;
    gap: 5px;
    padding: 5px 6px 5px 5px;
    max-width: calc(100% - 28px);
  }
  .brand-home { width: 40px; height: 40px; }
  .language-option { min-width: 51px; min-height: 44px; padding: 6px; font-size: 10px; gap: 4px; }
    .flag { width: 15px; height: 15px; }
  .content {
    top: calc(env(safe-area-inset-top,0px) + clamp(105px,13vh,125px));
    top: calc(env(safe-area-inset-top,0px) + clamp(105px,13dvh,125px));
    left: var(--gutter);
    width: calc(100% - var(--gutter) * 2);
    max-width: none;
    transform: none;
    grid-template-columns: minmax(0,1fr) clamp(104px,29vw,146px);
    column-gap: clamp(12px,3.5vw,24px);
    align-items: center;
  }
  .overline { grid-column: 1 / -1; grid-row: 1; margin: 0 0 20px; font-size: 10px; letter-spacing: .29em; }
  .name { grid-column: 1; grid-row: 2; }
  .name-first { font-size: clamp(31px,9.55vw,56px); letter-spacing: -.067em; }
  .name-last { font-size: clamp(23px,7vw,42px); letter-spacing: .10em; margin-top: .17em; }
  .speciality { grid-column: 1 / -1; grid-row: 3; margin: 20px 0 0; font-size: clamp(8px,2.15vw,11px); letter-spacing: .22em; line-height: 1.6; }
  .contacts { grid-column: 2; grid-row: 2; flex-direction: column; justify-content: center; gap: 12px; margin: 0; }
  .contact-link { width: 100%; min-height: 44px; padding: 10px 8px; font-size: clamp(10px,2.5vw,13px); line-height: 1.3; white-space: normal; }
  .portrait {
    left: 50%;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom,0px));
    width: min(108vw, calc((100vh - 310px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .89), 620px);
    width: min(108vw, calc((100dvh - 310px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .89), 620px);
    transform: translateX(-50%);
    animation-name: portrait-enter-mobile;
  }
  .portrait::after { background: linear-gradient(to right,var(--page),transparent 3%,transparent 97%,var(--page)),linear-gradient(to bottom,var(--page),transparent 1%,transparent 94%,var(--page)); }
  .content-ru .name-first { font-size: clamp(29px,9.05vw,53px); }
  .content-ru .name-last { font-size: clamp(22px,6.7vw,40px); letter-spacing: .065em; }
  .content-ru .speciality { max-width: 100%; font-size: clamp(8px,2.08vw,10px); letter-spacing: .08em; }
  .content-ru .contact-link { padding-inline: 7px; font-size: clamp(9px,2.35vw,12px); }
  /* Arabic stays properly joined, with a right-aligned name and a mirrored row. */
  .content-ar { grid-template-columns: minmax(0,1fr) clamp(104px,29vw,146px); }
  .content-ar .overline { font-size: 12px; margin-bottom: 12px; }
  .content-ar .name-first { font-size: clamp(30px,9vw,48px); line-height: 1.35; }
  .content-ar .name-last { font-size: clamp(24px,7vw,38px); line-height: 1.45; }
  .content-ar .speciality { font-size: clamp(12px,3.2vw,17px); margin-top: 12px; }
  .content-ar .contact-link { font-size: clamp(10px,2.7vw,14px); }
  @keyframes portrait-enter-mobile { from { opacity: 0; transform: translate(-50%,10px); } to { opacity: 1; transform: translate(-50%,0); } }
}
@media (max-width:370px) {
  .site-header { left: 10px; gap: 3px; max-width: calc(100% - 20px); }
  .brand-home { width: 36px; height: 36px; }
  .language-option { min-width: 46px; padding-inline: 5px; }
    .content { column-gap: 10px; grid-template-columns: minmax(0,1fr) 102px; }
  .name-first { font-size: 9.1vw; }
  .name-last { font-size: 6.6vw; }
  .content-ru .name-first { font-size: 8.6vw; }
  .content-ru .name-last { font-size: 6.3vw; }
  .content-ar { grid-template-columns: minmax(0,1fr) 102px; }
}
@media (max-width:700px) and (max-height:720px) {
  .content { top: calc(env(safe-area-inset-top,0px) + 87px); }
}
@media (max-width:700px) and (max-height:650px) {
  .content { top: calc(env(safe-area-inset-top,0px) + 87px); }
  .overline { margin-bottom: 13px; }
  .speciality { margin-top: 14px; }
  .contacts { gap: 8px; }
  .portrait { width: min(108vw,calc((100dvh - 280px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .89)); }
}
@media (min-width:701px) and (max-height:600px) {
  .site-header { top: 18px; padding-block: 4px; }
  .brand-home { width: 38px; height: 38px; }
  .content { top: 52%; transform: translateY(-35%); }
  .overline { margin-bottom: 18px; }
  .name-first { font-size: min(5vw,10vh); }
  .name-last { font-size: min(3.65vw,7vh); }
  .speciality { margin-top: 19px; }
  .contacts { margin-top: 24px; }
  .contact-link { min-height: 42px; padding-block: 11px; }
  .content-ar .name-first { font-size: 9vh; }
  .content-ar .name-last { font-size: 6.5vh; }
  .content-ar .overline { margin-bottom: 8px; }
  .content-ar .speciality { margin-top: 10px; }
  .content-ar .contacts { margin-top: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Allow zoomed text or unusually short windows to remain reachable. */
@media (max-height:450px) and (max-width:700px) {
  .site-shell { height: auto; min-height: 720px; }
  .portrait { width: 360px; }
}

/* Desktop: enlarge the portrait by 5% and move it and the Arabic copy left. */
@media (min-width:701px) {
  .site-shell { --desktop-shift: clamp(10px, 1.5vw, 24px); }
  .portrait {
    right: calc(3.8% + var(--desktop-shift));
    width: min(46.2vw, 84vh, 756px);
    width: min(46.2vw, 84dvh, 756px);
  }
  .content-ar { left: calc(var(--gutter) - clamp(20px, 3vw, 56px) - var(--desktop-shift)); }
}
@media (min-width:701px) and (max-width:1100px) {
  .portrait {
    right: calc(1% + var(--desktop-shift));
    width: min(50.4vw, 84vh);
    width: min(50.4vw, 84dvh);
  }
}