/* الدكتور لمك تركي العباس — v3 «midnight atlas»: deep navy ground (his logo), champagne gold hairlines, ivory museum plates.
   Same atlas idea as v2; super admin 2026-11-11: calmer type (no heavy display face), deeper, more luxurious colours, finer boxes. */
@font-face { font-family: "Amiri"; src: url(fonts/amiri-ar-700.woff2) format("woff2"); font-weight: 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Amiri"; src: url(fonts/amiri-lat-700.woff2) format("woff2"); font-weight: 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Plex"; src: url(fonts/plex-ar-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex"; src: url(fonts/plex-ar-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex"; src: url(fonts/plex-ar-600.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex"; src: url(fonts/plex-ar-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex"; src: url(fonts/plex-lat-400.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Plex"; src: url(fonts/plex-lat-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }

:root {
  --night: #0b1730; --navy: #10224a; --navy-2: #172d5c; --panel: #13264d; --panel-2: #1a3264;
  --ivory: #f4eee1; --ivory-2: #c9d1e2; --muted: #9fabc4;
  --gold: #c9a35a; --gold-l: #ead09a; --gold-d: #a8823c; --champ: linear-gradient(120deg, #f3dfae, #c9a35a 50%, #e8cb8a);
  --line: rgba(201, 163, 90, .32); --line-soft: rgba(201, 163, 90, .16);
  --plate: #f7f2e6; --wa: #17a35a;
  --gm-bg: var(--night); --gm-fg: var(--ivory); --gm-accent: var(--gold);
  --pad: clamp(20px, 5vw, 72px); --max: 1240px; --r: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ivory); font: 400 17px/1.85 "Plex", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background-color: var(--night);
  background-image: linear-gradient(rgba(201, 163, 90, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 163, 90, .05) 1px, transparent 1px),
    linear-gradient(180deg, #0b1730 0%, #10224a 30%, #0d1b3a 60%, #10224a 85%, #0b1730 100%);
  background-size: 64px 64px, 64px 64px, 100% 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 700; }
h2 { font: 700 clamp(32px, 4vw, 54px)/1.45 "Amiri", serif; color: var(--ivory); padding-block: 4px; }
h3 { font-size: clamp(21px, 2vw, 27px); }
p { margin: 0; }
button { font: inherit; color: inherit; }
.num { display: inline-block; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.label, .pl-tag, .pl-chap, .ch-no, .ph-no, .cl-top, figcaption [lang="en"] { font: 600 11.5px/1.4 "Plex", sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.label, .pl-chap, .ch-no, .ph-no { color: var(--gold); }
.label { margin-bottom: 12px; display: inline-flex; align-items: center; gap: 12px; }
.label::before, .label::after { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: .6; }
.sec-head { max-width: 780px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; padding-inline: var(--pad); }
.sec-head p:not(.label) { margin-top: 14px; font-size: 18px; color: var(--ivory-2); }

/* boxes: one luxurious card language — deep panel, champagne hairline, soft top light */
.lux, .phase, .clinic, .steps li.is-on button, .i-ch {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, .8); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px;
  font: 600 17px/1.2 "Plex", sans-serif; text-decoration: none; white-space: nowrap; }
.btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 14px 34px -14px rgba(23, 163, 90, .7); }
.btn-wa:hover { background: #12924f; }
.btn-ghost { color: var(--gold-l); box-shadow: inset 0 0 0 1px var(--gold); }
.btn-ghost:hover { background: rgba(201, 163, 90, .12); }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 10px var(--pad);
  background: rgba(11, 23, 48, .95); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: auto; }
.brand b { display: block; font: 700 19px/1.3 "Amiri", serif; color: var(--ivory); }
.brand small { display: block; font: 600 9.5px/1.3 "Plex", sans-serif; letter-spacing: .2em; color: var(--gold); }
.nav { display: flex; gap: 28px; margin-inline-start: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: 16px; color: var(--ivory-2); padding: 8px 0; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--gm-ease), color .3s; }
.nav a:hover { background-size: 100% 1px; color: var(--ivory); }
.top-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; color: var(--night); background: var(--champ); text-decoration: none; font-weight: 700; }
.top-call svg { width: 18px; height: 18px; fill: currentColor; }

/* atlas ruler (desktop) */
.ruler { position: fixed; z-index: 40; left: 18px; top: 50%; height: 56vh; width: 16px; transform: translateY(-50%); pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(201, 163, 90, .45) 0 1px, transparent 1px 9px) left / 7px 100% no-repeat,
              repeating-linear-gradient(180deg, rgba(201, 163, 90, .7) 0 1px, transparent 1px 45px) left / 13px 100% no-repeat; }
.ruler-mark { position: absolute; top: 0; left: 0; width: 0; height: 0; border-block: 6px solid transparent; border-left: 11px solid var(--gold-l); margin-top: -6px; will-change: transform; }

/* 1 · hero */
.hero { position: relative; overflow: hidden; padding: 110px var(--pad) 70px;
  background: radial-gradient(42% 60% at 24% 48%, rgba(56, 110, 200, .28), transparent 70%), radial-gradient(30% 40% at 88% 12%, rgba(201, 163, 90, .14), transparent 70%); }
.hero-in { position: relative; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 80px); align-items: center; min-height: calc(100svh - 180px); }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; color: var(--gold-l); margin-bottom: 14px; }
.kicker i { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.hero h1 { font: 700 min(4.6vw, 68px)/1.4 "Amiri", serif; white-space: nowrap; color: var(--ivory); padding-block: 6px; }
.hero .en { margin-top: 2px; font: 600 12.5px/1.5 "Plex", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
[dir="rtl"] .hero .en { text-align: right; } [dir="ltr"] .hero .en { text-align: left; }
.motto { margin-top: 22px; display: inline-block; white-space: nowrap; font: 700 min(3vw, 40px)/1.5 "Amiri", serif; padding: 6px 4px; color: var(--gold-l); }
.lead { margin-top: 12px; font-size: clamp(17px, 1.35vw, 19px); max-width: 620px; color: var(--ivory-2); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.specimen { position: relative; margin: 0; }
.spec-frame { position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 22px;
  background: radial-gradient(75% 60% at 50% 72%, rgba(74, 140, 230, .45), transparent 70%), linear-gradient(170deg, #1d3a74, #0f2146);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 8px rgba(11, 23, 48, .9), 0 0 0 9px var(--line-soft), 0 50px 80px -40px rgba(0, 0, 0, .9); }
.spec-frame img { position: absolute; inset: auto 0 0; width: 100%; height: auto; clip-path: inset(-40% 0 0 0 round 0 0 22px 22px); }
.crop { position: absolute; width: 20px; height: 20px; border: 1.5px solid var(--gold); z-index: 2; }
.c1 { top: -18px; left: -18px; border-right: 0; border-bottom: 0; } .c2 { top: -18px; right: -18px; border-left: 0; border-bottom: 0; }
.c3 { bottom: -18px; left: -18px; border-right: 0; border-top: 0; } .c4 { bottom: -18px; right: -18px; border-left: 0; border-top: 0; }
.specimen figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; font: 700 17px/1.4 "Amiri", serif; color: var(--ivory); }
.specimen figcaption [lang="en"] { color: var(--gold); }
.hero-spec { width: min(100%, 430px); justify-self: center; }
.hero-knee { position: absolute; z-index: 0; width: min(40vw, 560px); max-width: none; inset-inline-start: max(-2vw, calc(50% - 720px)); top: 470px; overflow: visible; pointer-events: none; opacity: .55; }
.hk-lines path { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: .5; }
.hk-lines .hk-hatch { stroke-dasharray: 2 5; opacity: .35; }
.hk-cart { fill: none; stroke: #7cc4e8; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.hk-lig { fill: none; stroke: #e2553f; stroke-width: 5; stroke-linecap: round; opacity: .8; }
.hk-lig2 { opacity: .4; }

/* 2 · ticker */
.ticker { background: rgba(7, 15, 32, .6); color: var(--ivory-2); padding: 14px 0; font: 600 13px/1.4 "Plex", sans-serif; letter-spacing: .3em; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.ticker span { display: inline-flex; align-items: center; gap: 24px; padding-inline-end: 24px; }
.ticker i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }

/* 3 · index */
.index { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 7vw, 100px); }
.idx { list-style: none; margin: 0 auto; padding: 0 var(--pad); max-width: 980px; }
.idx li { border-bottom: 1px solid var(--line-soft); }
.idx li:first-child { border-top: 1px solid var(--line); }
.idx a { display: grid; grid-template-columns: 74px 1fr 56px; align-items: center; gap: 16px; padding: 20px 14px; text-decoration: none;
  background: linear-gradient(90deg, rgba(201, 163, 90, .12), rgba(201, 163, 90, 0)) right / 0 100% no-repeat; transition: background-size .5s var(--gm-ease); }
.idx a:hover { background-size: 100% 100%; }
.i-no { font: 700 34px/1 "Amiri", serif; color: var(--gold); }
.i-t b { display: block; font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; line-height: 1.45; }
.i-t small { display: block; font-size: 15.5px; color: var(--muted); }
.i-ch { justify-self: end; font: 600 12px/1 "Plex", sans-serif; letter-spacing: .12em; padding: 8px 10px; border-radius: 999px; color: var(--gold-l); }
.also { max-width: 980px; margin: 26px auto 0; padding: 0 var(--pad); font-size: 16.5px; color: var(--ivory-2); }
.also b { color: var(--ivory); font-weight: 600; }

/* chapters */
.chapter { position: relative; padding: clamp(70px, 9vw, 120px) var(--pad) clamp(24px, 3vw, 40px); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.ch-word { font: 700 clamp(64px, 9vw, 128px)/1.3 "Amiri", serif; margin-top: 4px; padding-block: 8px; color: var(--gold-l); }
.ch-line { width: 100%; height: 6px; margin-top: 6px; }
.ch-line path { fill: none; stroke: var(--gold); stroke-width: 2; }
.ch-lead { margin-top: 18px; max-width: 640px; font-size: clamp(18px, 1.6vw, 22px); color: var(--ivory-2); }

/* plates (signature) — ivory museum plates on the night ground */
.plate { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--pad); }
.plate.flip .pl-art { order: 2; }
.pl-card { position: relative; padding: 18px 18px 24px; border-radius: 20px; color: #2a2f3a; background-color: var(--plate);
  background-image: radial-gradient(70% 60% at 50% 55%, rgba(124, 196, 232, .14), transparent 70%),
    linear-gradient(rgba(140, 120, 80, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 120, 80, .08) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  box-shadow: inset 0 0 0 1px rgba(168, 130, 60, .55), inset 0 0 0 6px var(--plate), inset 0 0 0 7px rgba(168, 130, 60, .35), 0 50px 90px -50px rgba(0, 0, 0, .95); }
.pl-tag { display: flex; justify-content: space-between; gap: 10px; color: #8a7346; padding: 6px 8px 12px; border-bottom: 1px solid rgba(168, 130, 60, .3); }
.pl-count { color: #a8823c; }
.pl-svg, .hero-knee { direction: ltr; }
.pl-svg { width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.pl-text h3 { margin-top: 10px; font: 700 clamp(28px, 2.8vw, 40px)/1.45 "Amiri", serif; color: var(--ivory); }
.pl-intro { margin-top: 8px; font-size: 18px; color: var(--ivory-2); }
.steps { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: st; display: grid; gap: 6px; }
.steps li { counter-increment: st; }
.steps button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; width: 100%; padding: 13px 16px; border-radius: 14px;
  transition: background-color .4s, box-shadow .4s, opacity .4s; }
.steps button::before { content: "0" counter(st); grid-row: span 2; font: 700 24px/1.35 "Amiri", serif; color: rgba(201, 163, 90, .4); transition: color .4s; }
.steps b { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--ivory); }
.steps span { font-size: 16.5px; line-height: 1.75; color: var(--muted); transition: color .4s; }
.steps li:not(.is-on) button:hover { background: rgba(255, 255, 255, .04); }
.steps li.is-on button { box-shadow: inset 0 0 0 1px var(--gold), 0 24px 50px -30px rgba(0, 0, 0, .9); }
.steps li.is-on button::before { color: var(--gold-l); }
.steps li.is-on span { color: var(--ivory-2); }
.steps button:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.pl-dots { display: none; }

/* plate paints */
.pl-svg .bone { fill: url(#gBone); stroke: #a8916a; stroke-width: 2; transition: fill-opacity .6s; }
.pl-svg .hatch { fill: none; stroke: #c9b383; stroke-width: 1.3; stroke-dasharray: 2 6; }
.pl-svg .cart { fill: none; stroke: #7cc4e8; stroke-width: 7; stroke-linecap: round; }
.pl-svg .cart.lab { stroke-width: 12; stroke: #6cb8de; }
.pl-svg .cart.worn { stroke: #9cc8da; stroke-width: 4; stroke-dasharray: 9 10; }
.pl-svg .lig { fill: none; stroke: #e2553f; stroke-linecap: round; }
.pl-svg .lig.soft { opacity: .45; } .pl-svg .lig.deep { stroke: #b8402e; opacity: .7; }
.pl-svg .men path { fill: none; stroke-linecap: round; }
.pl-svg .tear { fill: none; stroke: #b83a26; stroke-width: 4.5; stroke-linecap: round; }
.pl-svg .healed { fill: none; stroke: #2f7fae; stroke-width: 2.5; }
.pl-svg .stitches path, .pl-svg .anchors path { fill: none; stroke: #15284a; stroke-width: 3; stroke-linecap: round; }
.pl-svg .anchors path { stroke-width: 2.2; }
.pl-svg .crack { fill: none; stroke: #b83a26; stroke-width: 3; }
.pl-svg .screws rect { fill: url(#gMetal); stroke: #6b7684; }
.pl-svg .tunnel { fill: none; stroke: #8a6a3a; stroke-width: 13; stroke-opacity: .32; stroke-linecap: round; }
.pl-svg .graft { fill: none; stroke: #d9a441; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.pl-svg .graft-hi { fill: none; stroke: #fff6d8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-svg .ring { fill: none; stroke: #19a7d9; stroke-width: 2.5; }
.pl-svg .cut { fill: none; stroke: #e2553f; stroke-width: 2.5; }
.pl-svg .arc { fill: none; stroke: #19a7d9; stroke-width: 3; }
.pl-svg .metal { fill: url(#gMetal); stroke: #6b7684; stroke-width: 1.5; }
.pl-svg .tags text { font: 600 10.5px "Plex", sans-serif; letter-spacing: .16em; fill: #6b6150; }
.pl-svg .tags .t-cut { fill: #b83a26; }
.pl-svg .lead-l { stroke: #8a7d63; stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
#op-hip.st3 .fem { fill-opacity: .5; }

/* stage engine: layers appear (data-in), leave (data-out) or move (data-mv) as the scroll performs the operation */
.pl-svg [data-in], .pl-svg [data-out], .pl-svg [data-mv] { transform-box: fill-box; transform-origin: center;
  transition: opacity .7s var(--gm-ease) var(--d, 0s), transform 1s var(--gm-ease) var(--d, 0s), stroke-dashoffset 1.2s var(--gm-ease) var(--d, 0s); }
.js .pl-svg [data-in]:not(.on), .js .pl-svg [data-out]:not(.on) { opacity: 0; transform: var(--from, none); }
.pl-svg .mv { transform: var(--mv); }
.pl-svg .frag, .pl-svg .head, .pl-svg .lab-low { transform-box: view-box; transform-origin: 200px 200px; }
.js .pl-svg .dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--gm-ease) var(--d, 0s), opacity .5s var(--d, 0s); }
.js .pl-svg .dr.on, .js .pl-svg .on .dr { stroke-dashoffset: 0; }
.pl-svg .screws rect, .pl-svg .anchors circle { transition: opacity .45s var(--d, 0s), transform .6s var(--gm-ease) var(--d, 0s); transform-box: fill-box; }
.js .pl-svg .screws:not(.on) rect { opacity: 0; transform: translateX(40px); }
.js .pl-svg .anchors:not(.on) circle { opacity: 0; transform: scale(0); }
.pl-svg .pulse.on { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* 7 · return */
.return { padding: 30px 0 clamp(80px, 10vw, 130px); }
.phases { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.phase { padding: 24px 22px 28px; border-radius: var(--r); }
.gauge { width: 100%; max-width: 210px; margin: 0 auto 12px; overflow: visible; }
.g-bg, .g-fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.g-bg { stroke: rgba(255, 255, 255, .09); }
.g-fill { stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--gm-ease) .1s; }
.phase:nth-child(1) .g-fill { stroke: #c97a5a; } .phase:nth-child(3) .g-fill { stroke: #6fb3e0; } .phase:nth-child(4) .g-fill { stroke: #4cc488; }
.g-needle { transform-origin: 100px 100px; transition: transform 1.6s var(--gm-ease) .1s; }
.g-needle path { stroke: var(--ivory); stroke-width: 3; stroke-linecap: round; }
.g-needle circle { fill: var(--gold); }
.g-ticks path { stroke: rgba(201, 163, 90, .5); stroke-width: 1.5; }
.phase.on .g-needle { transform: rotate(var(--a)); }
.phase h3 { margin-top: 4px; font: 700 24px/1.45 "Amiri", serif; }
.phase p:not(.ph-no) { margin-top: 6px; font-size: 16.5px; color: var(--ivory-2); }

/* doctor */
.doctor { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 96px); align-items: center; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--pad); }
.specimen.small { width: min(100%, 400px); justify-self: center; }
.specimen.small .spec-frame { aspect-ratio: 1; background: radial-gradient(75% 65% at 50% 72%, rgba(201, 163, 90, .45), transparent 70%), linear-gradient(170deg, #1d3a74, #0f2146); }
.doc-copy h2 { font-size: clamp(32px, 3.6vw, 50px); }
.creds { list-style: none; margin: 24px 0 0; padding: 0; }
.creds li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.c-no { font: 700 24px/1 "Amiri", serif; color: var(--gold); }
.creds b { display: block; font-size: 18.5px; font-weight: 600; line-height: 1.6; }
.creds span:not(.c-no) { display: block; font-size: 15px; color: var(--muted); }

/* clinics */
.clinics { padding: clamp(70px, 9vw, 130px) 0; }
.labels-row { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.clinic { padding: 0 28px 28px; border-radius: 22px; overflow: hidden; }
.cl-top { display: flex; justify-content: space-between; margin: 0 -28px 24px; padding: 13px 28px; background: var(--champ); color: var(--night); }
.clinic h3 { font: 700 30px/1.4 "Amiri", serif; }
.addr { margin-top: 6px; font-size: 18px; color: var(--ivory-2); min-height: 3.6em; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border-radius: 14px; background: rgba(7, 15, 32, .45); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-soft); transition: box-shadow .3s; }
.ph small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.ph .num { font-weight: 600; font-size: 16.5px; color: var(--ivory); }
.ph:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.map { display: flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 10px; border-radius: 999px; color: var(--gold-l); text-decoration: none; font-weight: 600; box-shadow: inset 0 0 0 1px var(--gold); }
.map:hover { background: rgba(201, 163, 90, .12); }

/* finale */
.finale { text-align: center; padding: clamp(70px, 9vw, 120px) var(--pad) clamp(60px, 8vw, 100px);
  background: radial-gradient(50% 70% at 50% 100%, rgba(201, 163, 90, .16), transparent 70%); }
.fin-shield { width: 86px; height: auto; margin: 0 auto 6px; }
.fin-word { font: 700 clamp(48px, 7vw, 104px)/1.4 "Amiri", serif; padding-block: 8px; color: var(--gold-l); }
.fin-sub { margin-top: 6px; font-size: 19px; color: var(--ivory-2); }
.finale .btn { margin-top: 26px; }
.btn.big { min-height: 62px; padding: 0 36px; font-size: 19px; }
.fin-note { max-width: 560px; margin: 26px auto 0; font-size: 14.5px; color: var(--muted); }

/* footer */
.foot { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 24px; align-items: center; padding: 30px var(--pad) 40px; background: #08122a; box-shadow: 0 -1px 0 var(--line); }
.f-brand { display: flex; gap: 14px; align-items: center; }
.f-brand img { width: 44px; height: auto; }
.f-brand b { display: block; font: 700 20px/1.4 "Amiri", serif; }
.f-brand span { display: block; font-size: 13px; color: var(--muted); }
.f-ph { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.f-ph a { text-decoration: none; font-weight: 500; color: var(--ivory-2); }
.f-by { font-size: 14.5px; color: var(--muted); }
.f-by a { color: var(--gold-l); font-weight: 600; }
.fab { position: fixed; z-index: 45; bottom: 18px; right: 18px; width: 58px; height: 58px; border-radius: 50%; display: none; place-items: center; background: var(--wa); color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); }
.fab svg { width: 30px; height: 30px; fill: currentColor; }

/* ---------- tablet / phone ---------- */
@media (max-width: 1100px) { .ruler { display: none; } }
@media (max-width: 1020px) {
  .phases { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .f-ph { justify-content: center; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .top-call { margin-inline-start: auto; }
  .hero { padding-top: 88px; padding-bottom: 50px; }
  .hero-in { grid-template-columns: 1fr; min-height: 0; gap: 60px; }
  .hero h1 { font-size: min(calc((100vw - 2 * var(--pad)) / 10.2), 64px); }
  .motto { font-size: min(calc((100vw - 2 * var(--pad)) / 12), 40px); }
  .hero-spec { width: 78%; max-width: 400px; }
  .plate { grid-template-columns: 1fr; gap: 22px; padding-block: 34px; }
  .plate.flip .pl-art { order: 0; }
  .doctor, .labels-row { grid-template-columns: 1fr; }
  .fab { display: grid; }
  .steps { display: grid; margin-top: 12px; }
  .steps li { grid-area: 1 / 1; }
  .js .steps li:not(.is-on) { visibility: hidden; opacity: 0; }
  .js .pl-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
  .pl-dots button { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
  .pl-dots button::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: rgba(201, 163, 90, .3); transition: background .3s, width .3s; }
  .pl-dots button.is-on::before { background: var(--gold-l); width: 40px; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .brand small { display: none; }
  .hero .lead { font-size: 16.5px; }
  .hero .en .x { display: none; }
  .kicker { font-size: 14px; gap: 8px; margin-bottom: 8px; }
  .specimen figcaption { position: relative; z-index: 2; }
  .hero-knee { width: 115vw; inset-inline-start: -45vw; top: 40px; opacity: .3; }
  .cta .btn { width: 100%; }
  .ticker { font-size: 12px; }
  .idx a { grid-template-columns: 46px 1fr 44px; gap: 10px; padding: 15px 4px; }
  .i-no { font-size: 28px; }
  .pl-card { padding: 12px 10px 16px; border-radius: 16px; }
  .pl-tag { font-size: 10px; letter-spacing: .12em; }
  .pl-intro { font-size: 16.5px; }
  .steps button { grid-template-columns: 38px 1fr; padding: 12px; }
  .phases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 20px; scrollbar-width: none; }
  .phases::-webkit-scrollbar { display: none; }
  .phase { flex: 0 0 80%; scroll-snap-align: center; }
  .clinic { padding: 0 18px 22px; } .cl-top { margin-inline: -18px; padding-inline: 18px; }
  .ph .num { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pl-svg [data-in], .pl-svg [data-out], .pl-svg [data-mv], .js .pl-svg .dr { transition-duration: .01s !important; }
  .pl-svg .pulse.on { animation: none; }
}

/* intro — the doctor's logo for ~3 s on entry, then the site opens by itself (no button); once per visit */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 45%, #1b356b, #0b1730 70%);
  animation: intro-out .8s cubic-bezier(.76, 0, .24, 1) 2.5s forwards; }
.no-intro .intro { display: none; }
.intro-in { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 20px; }
.intro-logo { width: clamp(120px, 22vw, 190px); height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); animation: intro-logo 1.3s cubic-bezier(.16, 1, .3, 1) both; }
.intro-name { font: 700 clamp(26px, 4vw, 44px)/1.4 "Amiri", serif; color: var(--ivory); animation: intro-up .9s cubic-bezier(.16, 1, .3, 1) .55s both; }
.intro-line { display: block; width: 160px; height: 1px; background: var(--gold); transform-origin: center; animation: intro-line 1s cubic-bezier(.16, 1, .3, 1) .9s both; }
.intro-sub { font: 600 11.5px/1.4 "Plex", sans-serif; letter-spacing: .3em; color: var(--gold); animation: intro-up .9s cubic-bezier(.16, 1, .3, 1) 1.1s both; }
@keyframes intro-logo { from { opacity: 0; transform: scale(.82) translateY(14px); } }
@keyframes intro-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes intro-line { from { transform: scaleX(0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .intro { animation-delay: 1.5s; } .intro * { animation: none !important; } }

/* language switch — always on the left */
.lang { position: fixed; z-index: 46; left: 18px; bottom: 18px; min-width: 58px; height: 58px; padding: 0 16px; border-radius: 999px; display: grid; place-items: center;
  font: 700 16px/1 "Plex", sans-serif; letter-spacing: .06em; color: var(--gold-l); text-decoration: none; background: rgba(11, 23, 48, .92);
  box-shadow: inset 0 0 0 1px var(--gold), 0 14px 30px -12px rgba(0, 0, 0, .8); }
.lang:hover { background: var(--panel-2); }
@media (min-width: 1101px) { .lang { bottom: 24px; left: 44px; } }
[dir="ltr"] .hero h1 { font-size: min(3.9vw, 58px); }
@media (max-width: 860px) { [dir="ltr"] .hero h1 { font-size: min(calc((100vw - 2 * var(--pad)) / 12), 58px); } }