/* King's College Hospital London – Jeddah · home page v2
   Same sections and copy as kch.sa. Tokens from the V3 design system; motion from the magic kit. */

/* Tajawal sits high: its ascent leaves 10 units above the capitals and 357 below the baseline. These overrides centre the cap height in the line box (same 1.2em total), so labels sit in the exact middle of pills and buttons everywhere. */
@font-face { font-family: "Tajawal"; font-weight: 300; font-display: swap; src: url("assets/fonts/Tajawal-Light.ttf") format("truetype"); ascent-override: 91.65%; descent-override: 28.35%; line-gap-override: 0%; }
@font-face { font-family: "Tajawal"; font-weight: 400; font-display: swap; src: url("assets/fonts/Tajawal-Regular.ttf") format("truetype"); ascent-override: 91.65%; descent-override: 28.35%; line-gap-override: 0%; }
@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url("assets/fonts/Tajawal-Medium.ttf") format("truetype"); ascent-override: 91.65%; descent-override: 28.35%; line-gap-override: 0%; }
@font-face { font-family: "Tajawal"; font-weight: 700; font-display: swap; src: url("assets/fonts/Tajawal-Bold.ttf") format("truetype"); ascent-override: 91.65%; descent-override: 28.35%; line-gap-override: 0%; }
@font-face { font-family: "Tajawal"; font-weight: 800; font-display: swap; src: url("assets/fonts/Tajawal-ExtraBold.ttf") format("truetype"); ascent-override: 91.65%; descent-override: 28.35%; line-gap-override: 0%; }

:root {
  --navy: #0B2443;
  --navy-2: #163048;
  --navy-3: #1F4E79;
  --night: #071A33;
  --ink: #1E1E1E;
  --ink-2: rgba(30, 30, 30, .74);
  --muted: rgba(30, 30, 30, .56);
  --line: rgba(11, 36, 67, .13);
  --line-2: rgba(11, 36, 67, .07);
  --tint: #E8EBF0;
  --cream: #F5F4F0;
  --sky: #8FC1FF;
  --blue: #2C6BB0;
  --blue-2: #5F97D2;
  --soft: #6E8FB5;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-surface: cubic-bezier(.7, 0, .3, 1);
  --rise: 16px;

  --r-card: 22px;
  --r-big: 28px;
  --gutter: clamp(16px, 4vw, 64px);
  --maxw: 1280px;
  --font: "Tajawal", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
main { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.mark-crop { direction: ltr; overflow: hidden; }
.mark-crop img { height: 100%; width: auto; max-width: none; }

/* ── Type ─────────────────────────────────────────── */
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-3); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform 700ms var(--ease-out) 150ms; }
[dir="rtl"] .eyebrow::before { transform-origin: 100% 50%; }
.js .eyebrow[data-rise]:not(.in)::before { transform: scaleX(0); }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 14px; }
.h2 { font-size: clamp(32px, 4.3vw, 58px); line-height: 1.04; font-weight: 700; letter-spacing: -.028em; color: var(--navy); margin: 0; }
.soft { color: var(--soft); font-weight: 300; }
[dir="rtl"] .h2, [dir="rtl"] .h1 { letter-spacing: 0; line-height: 1.25; }
.lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); max-width: 54ch; margin: 18px 0 0; }

/* Heading words rise from behind an edge (by word, safe for Arabic) */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; transition: transform 800ms var(--ease-out); transition-delay: calc(var(--i) * 45ms + var(--wd, 0ms)); }
.js [data-words]:not(.in) .w > span { transform: translateY(108%); }

/* Content rises 16px, once */
.js [data-rise] { opacity: 0; transform: translateY(var(--rise)); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rise].in { opacity: 1; transform: none; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  --h: 52px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px;
  height: var(--h); padding-inline: 22px 7px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy);
  font-weight: 700; font-size: 16px; white-space: nowrap;
  transition: transform 150ms var(--ease-out), border-color 250ms var(--ease-out), background 250ms var(--ease-out), color 250ms;
}
.btn:active { transform: scale(.97); }
.btn:hover { border-color: var(--navy); }
.btn::after { content: ""; position: absolute; inset: -2px auto -2px 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%) skewX(-18deg); }
.btn:hover::after { transform: translateX(320%) skewX(-18deg); transition: transform 700ms var(--ease-in-out); }
.btn .arr { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--tint); color: var(--navy); flex: none; transition: background 250ms; }
.btn .arr svg { width: 16px; height: 16px; transition: transform 420ms var(--ease-out); }
.btn .arr svg + svg { position: absolute; transform: translateX(-170%); }
.btn:hover .arr svg:first-child { transform: translateX(170%); }
.btn:hover .arr svg + svg { transform: none; }
[dir="rtl"] .btn .arr svg { scale: -1 1; }
[dir="rtl"] .btn .arr svg + svg { transform: translateX(170%); }
[dir="rtl"] .btn:hover .arr svg:first-child { transform: translateX(-170%); }
[dir="rtl"] .btn:hover .arr svg + svg { transform: none; }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.primary .arr { background: rgba(255,255,255,.14); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.light { background: #fff; color: var(--navy); border-color: #fff; }
.btn.glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn.glass .arr { background: rgba(255,255,255,.14); color: #fff; }
.btn.glass:hover { border-color: #fff; background: rgba(255,255,255,.16); }
.btn.plain { padding-inline: 20px; }
.btn.small { --h: 42px; font-size: 14px; padding-inline: 16px 5px; }
.btn.small .arr { width: 32px; height: 32px; }
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn.plain .ic { margin-inline-start: -4px; }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); font-size: 15px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 300ms var(--ease-out); padding-bottom: 2px; }
[dir="rtl"] .link { background-position: 100% 100%; }
.link:hover { background-size: 100% 1px; }
.link svg { width: 14px; height: 14px; transition: transform 300ms var(--ease-out); }
.link:hover svg { transform: translateX(4px); }
[dir="rtl"] .link svg { scale: -1 1; }
[dir="rtl"] .link:hover svg { transform: translateX(-4px); }

/* ── Scrim gradients are SVG images rather than CSS gradients: identical pixels, but Firefox redraws large CSS gradients on
   every scroll frame (40-60ms frames over hero, centres, step cards); an image gradient is rasterized once and reused. ── */
/* The cursor rim: a 1px line of light on the side nearest the pointer (magic-qaider guide/hover.md §2) */
.rim { position: relative; }
.rim::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 6;
  background: conic-gradient(from calc(var(--ang, 0deg) - 58deg), transparent 0deg, var(--rim, rgba(95,151,210,1)) 58deg, transparent 116deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: clamp(0, calc(var(--edge, 0) * 1.15 - .1), 1); transition: opacity 450ms var(--ease-out);
}
.rim.dark { --rim: rgba(176, 212, 255, 1); }

/* ── First load: the logo arrives, waits on the facade's hexes, then flies to the navbar ── */
.loader { position: fixed; inset: 0; z-index: 9999; animation: loaderFailsafe 0s linear 10s forwards; }
@keyframes loaderFailsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.loader .cur { position: absolute; inset: 0; will-change: transform; }
.loader .cur.back { background: var(--tint); }
.loader .cur.front { background: #fff; }
.loader .skirt { position: absolute; left: -10%; width: 120%; top: 100%; height: 110px; margin-top: -1px; transform-origin: 50% 0; transform: scaleY(0); }
.loader .skirt svg { width: 100%; height: 100%; display: block; }
.loader .lamp { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms linear;
  background: url("assets/footer-pattern.webp") center / 720px auto repeat; filter: brightness(1.1);
  -webkit-mask: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), #000 0, transparent 100%); mask: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), #000 0, transparent 100%); }
.loader.lit .lamp { opacity: .14; }
.loader .stage { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 32px; }
.loader .logo-fly { width: min(330px, 72vw); aspect-ratio: 311 / 58; position: relative; transform-origin: 0 0; direction: ltr; }
.loader .logo-fly .tilepart { position: absolute; inset: 0 auto 0 0; width: calc(100% * 58.1 / 311); overflow: hidden; animation: ldTile 620ms var(--ease-out) both; }
.loader .logo-fly .wordpart { position: absolute; inset: 0; clip-path: inset(0 0 0 20%); animation: ldWord 760ms var(--ease-out) 260ms both; }
.loader .logo-fly img { height: 100%; width: auto; max-width: none; }
@keyframes ldTile { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ldWord { from { clip-path: inset(0 100% 0 20%); } to { clip-path: inset(0 0 0 20%); } }
.loader .hexes { display: flex; gap: 7px; transition: opacity 160ms, transform 160ms; }
.loader .hexes i { width: 14px; height: 16px; background: var(--line); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: hexFill 320ms var(--ease-out) both, hexWave 1.7s var(--ease-in-out) infinite; animation-delay: calc(600ms + var(--i) * 80ms), calc(1.32s + var(--i) * 130ms); }
.loader .hexes i:nth-child(odd) { --c: #2C6BB0; } .loader .hexes i:nth-child(even) { --c: #5F97D2; } .loader .hexes i:nth-child(3) { --c: #A9C8EA; }
@keyframes hexFill { from { background: var(--line); transform: scale(.7); } to { background: var(--c); transform: none; } }
@keyframes hexWave { 0%, 100% { opacity: 1; transform: none; background: var(--c); } 30% { opacity: .42; transform: scale(.86); background: var(--c); } }
.loader.leaving .hexes { opacity: 0; transform: translateY(-6px); }
.loader.gone { display: none; }
html.loading .nav .logo { visibility: hidden; }

/* ── Utility bar + navbar ────────────────────────── */
.util { background: var(--navy); color: rgba(255,255,255,.78); font-size: 13px; position: relative; z-index: 51; }
.util .wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; gap: 16px; }
.util a, .util button { background: none; border: 0; color: inherit; padding: 0; transition: color 200ms; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.util a:hover, .util button:hover { color: #fff; }
.util .care b { color: #fff; font-weight: 700; }
.util svg { width: 14px; height: 14px; }
.util nav { display: flex; gap: 22px; align-items: center; }
.util .sep { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

.nav { position: sticky; top: 0; z-index: 50; height: 76px; transition: transform 460ms var(--ease-out); }
.nav.hide { transform: translateY(-110%); }
.nav-bg { position: absolute; inset: 0; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--line-2); clip-path: inset(0 0 0 0 round 0); transition: clip-path 560ms var(--ease-surface), background 300ms; }
.nav.float .nav-bg { clip-path: inset(10px max(10px, calc((100% - 1340px) / 2)) 0 round 18px); background: rgba(255,255,255,.8); border-bottom-color: transparent; }
.nav .ring { position: absolute; inset: 10px max(10px, calc((100% - 1340px) / 2)) 0; border: 1px solid var(--line); border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease-out); }
.nav.float .ring { opacity: 1; }
.nav .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; transition: transform 560ms var(--ease-surface); }
.nav.float .wrap { transform: translateY(5px); }
.logo { display: block; height: 40px; flex: none; }
.logo img { height: 100%; width: auto; }
.links { position: relative; display: flex; gap: 2px; align-items: center; }
.links > .item { position: relative; }
.links .top { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--navy); background: none; border: 0; }
.links .top svg { width: 12px; height: 12px; transition: transform 300ms var(--ease-out); }
.links .item.open .top svg { transform: rotate(180deg); }
.links .pill { position: absolute; z-index: 0; top: 50%; left: 0; height: 40px; margin-top: -20px; border-radius: 999px; background: var(--tint); opacity: 0;
  transition: transform 320ms var(--ease-out), width 320ms var(--ease-out), opacity 200ms var(--ease-out); pointer-events: none; }
.links.hovering .pill { opacity: 1; }
.drop { position: absolute; top: calc(100% + 14px); inset-inline-start: -8px; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px;
  opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: 20% 0; pointer-events: none; visibility: hidden;
  transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s 280ms; }
[dir="rtl"] .drop { transform-origin: 80% 0; }
.item.open .drop { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s; }
.drop.mega { width: 600px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 14px; }
.drop a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 15px; color: var(--navy); font-weight: 500; transition: background 200ms; }
.drop a:hover, .drop a:focus-visible { background: var(--tint); }
.drop a small { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.drop .all { grid-column: 1 / -1; border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 14px; font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; place-items: center; transition: transform 150ms var(--ease-out); }
.burger:active { transform: scale(.92); }
.burger i { display: block; width: 18px; height: 1.5px; background: var(--navy); position: relative; transition: background 200ms; }
.burger i::before, .burger i::after { content: ""; position: absolute; inset-inline: 0; height: 1.5px; background: var(--navy); transition: transform 320ms var(--ease-out); }
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
.menu-open .burger i { background: transparent; }
.menu-open .burger i::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger i::after { transform: translateY(-6px) rotate(-45deg); }

/* Phone menu: it rises as one surface while the page steps back as a card (the open ground in the phone-menu survey) */
.menu { position: fixed; inset: 0; z-index: 45; background: var(--navy); color: #fff; padding: 132px var(--gutter) 32px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  clip-path: inset(0 0 100% 0 round 0 0 40px 40px); visibility: hidden; transition: clip-path 560ms var(--ease-surface), visibility 0s 560ms; }
.menu-open .menu { clip-path: inset(0 0 0 0 round 0); visibility: visible; transition: clip-path 640ms var(--ease-surface), visibility 0s; }
.menu a.big { font-size: 32px; font-weight: 700; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; align-items: center;
  opacity: 0; transform: translateY(18px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.menu a.big svg { width: 18px; height: 18px; opacity: .6; }
[dir="rtl"] .menu a.big svg { scale: -1 1; }
.menu-open .menu a.big { opacity: 1; transform: none; transition-delay: calc(260ms + var(--i) * 45ms); }
.menu .btn { margin-top: 28px; align-self: flex-start; opacity: 0; transition: opacity 400ms var(--ease-out) 480ms; }
.menu-open .menu .btn { opacity: 1; }
main, .util { transition: transform 640ms var(--ease-surface), filter 640ms var(--ease-surface); transform-origin: 50% 0; }
.menu-open main, .menu-open .util { transform: scale(.94); filter: brightness(.6); }

/* ── Hero: the King's tile opens into the hospital film ── */
.hero { position: relative; padding: 12px 12px 0; }
.hero-frame { position: relative; height: max(580px, calc(100svh - 126px)); }
.window { position: absolute; inset: 0; border-radius: var(--r-big); overflow: hidden; background: var(--navy); transform-origin: 50% 0; }
.window .media { position: absolute; inset: -16px; transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--ps, 1)); transition: transform 1600ms var(--ease-out); }
.window video, .window .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.window .poster { background: url("assets/hero-building.jpg") center 58% / cover no-repeat; }
.window video { opacity: 0; transition: opacity 500ms var(--ease-out); }
.window video.playing { opacity: 1; }
.window .shade { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g0' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.3'/%3E%3Cstop offset='0.24' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.35'/%3E%3Cstop offset='0.55' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.88'/%3E%3Cstop offset='0.38' stop-color='%23071A33' stop-opacity='0.62'/%3E%3Cstop offset='0.68' stop-color='%23071A33' stop-opacity='0.18'/%3E%3Cstop offset='0.82' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g0)'/%3E%3Crect width='1' height='1' fill='url(%23g1)'/%3E%3Crect width='1' height='1' fill='url(%23g2)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
[dir="rtl"] .window .shade { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g0' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.3'/%3E%3Cstop offset='0.24' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.35'/%3E%3Cstop offset='0.55' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.88'/%3E%3Cstop offset='0.38' stop-color='%23071A33' stop-opacity='0.62'/%3E%3Cstop offset='0.68' stop-color='%23071A33' stop-opacity='0.18'/%3E%3Cstop offset='0.82' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g0)'/%3E%3Crect width='1' height='1' fill='url(%23g1)'/%3E%3Crect width='1' height='1' fill='url(%23g2)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.hero-copy { position: absolute; inset-inline: clamp(24px, 4.5vw, 72px); bottom: clamp(124px, 16vh, 160px); z-index: 3; color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; pointer-events: none; }
.hero .h1 { font-size: clamp(42px, 6.1vw, 96px); line-height: 1; font-weight: 700; letter-spacing: -.035em; margin: 0; max-width: 14ch; color: #fff; }
[dir="rtl"] .hero .h1 { letter-spacing: 0; line-height: 1.2; max-width: 15ch; }
.hero .tile { width: 72px; height: 72px; border-radius: 12%; flex: none; position: relative; z-index: 4; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.hero .wtag { position: absolute; top: clamp(20px, 3vw, 34px); inset-inline-end: clamp(20px, 3vw, 34px); z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.hero .wtag button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(7,26,51,.25); color: #fff; font-size: 13px; font-weight: 700;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 250ms, border-color 250ms, transform 150ms var(--ease-out); }
.hero .wtag button:hover { border-color: #fff; background: rgba(7,26,51,.45); }
.hero .wtag button:active { transform: scale(.95); }
.hero .wtag svg { width: 14px; height: 14px; }
.hero .wtag .prog { width: 14px; height: 14px; }
.hero .wtag .prog circle { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 2; }
.hero .wtag .prog .p { stroke: #fff; stroke-dasharray: 37.7; stroke-dashoffset: calc(37.7 * (1 - var(--vp, 0))); transform: rotate(-90deg); transform-origin: center; }
.js .hero:not(.opened) .wtag { opacity: 0; }
.hero .wtag { transition: opacity 600ms var(--ease-out) 400ms; }

/* Quick actions: one glass bar on the hero's lower edge */
.quick { position: absolute; z-index: 5; inset-inline: clamp(24px, 4.5vw, 72px); bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  border-radius: 22px; background: rgba(255,255,255,.2); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.quick a { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 22px; color: #fff; background: rgba(7,26,51,.34); transition: background 300ms var(--ease-out); }
.quick a:first-child { border-start-start-radius: 22px; border-end-start-radius: 22px; }
.quick a:last-child { border-start-end-radius: 22px; border-end-end-radius: 22px; }
.quick a:hover { background: rgba(7,26,51,.14); }
.quick a:active .qi { transform: scale(.9); }
.quick .qi { width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--navy); display: grid; place-items: center; flex: none; transition: transform 150ms var(--ease-out); perspective: 200px; }
.quick .qi svg { width: 22px; height: 22px; overflow: visible; }
.quick .qi svg * { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.quick b { font-size: 17px; font-weight: 700; display: block; line-height: 1.2; }
.quick .go { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; transition: background 250ms, border-color 250ms, color 250ms; flex: none; }
.quick a:hover .go { background: #fff; color: var(--navy); border-color: #fff; }
.quick .go svg { width: 14px; height: 14px; transition: transform 300ms var(--ease-out); }
[dir="rtl"] .quick .go svg { scale: -1 1; }
.quick a:hover .go svg { transform: translateX(3px); }
[dir="rtl"] .quick a:hover .go svg { transform: translateX(-3px); }
.js .hero:not(.opened) .quick { opacity: 0; transform: translateY(16px); }
.quick { transition: opacity 600ms var(--ease-out) 250ms, transform 700ms var(--ease-out) 250ms; }
/* each icon performs its own action (guide/hover.md §5): the calendar flips a page, the stethoscope swings, the sparks turn */
.qi .page { transform-box: fill-box; transform-origin: 50% 0; transition: transform 600ms var(--ease-out); }
.quick a:hover .qi .page, .quick a:focus-visible .qi .page { transform: rotateX(180deg); }
.qi .steth { transform-box: view-box; transform-origin: 30% 8%; }
.quick a:hover .qi .steth, .quick a:focus-visible .qi .steth { animation: swing 700ms var(--ease-out); }
@keyframes swing { 30% { transform: rotate(-12deg); } 65% { transform: rotate(6deg); } 100% { transform: none; } }
.qi .spark { transform-box: fill-box; transform-origin: center; }
.quick a:hover .qi .spark, .quick a:focus-visible .qi .spark { animation: turn 700ms var(--ease-out); }
.quick a:hover .qi .spark.s2 { animation-delay: 90ms; }
@keyframes turn { 45% { transform: scale(1.25) rotate(20deg); } 100% { transform: none; } }

/* ── Symptom band ────────────────────────────────── */
.symptom { padding-block: clamp(96px, 11vw, 150px) clamp(64px, 8vw, 110px); }
.sym-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sym-grid .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.drk { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 380 / 494; max-width: 420px; justify-self: end; width: 100%; background: #0d2c5a; isolation: isolate; }
[dir="rtl"] .drk { justify-self: start; }
.drk .img { position: absolute; inset: -12px; background: url("assets/dr-kings-panel.png") center / cover no-repeat; transform: translate(var(--px, 0), var(--py, 0)) scale(1.02); transition: transform 1200ms var(--ease-out); }
.drk .scan { position: absolute; inset-inline: 0; top: 0; height: 30%; background: linear-gradient(to bottom, rgba(143,193,255,0), rgba(143,193,255,.26) 85%, rgba(214,234,255,.95) 100%); transform: translateY(-110%); pointer-events: none; mix-blend-mode: screen; }
.drk.scanned .scan { animation: scan 1500ms var(--ease-in-out) 250ms both; }
@keyframes scan { 0% { transform: translateY(-110%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(345%); opacity: 0; } }
.drk .shine { position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 60%); opacity: 0; transition: opacity 400ms; pointer-events: none; }
.drk:hover .shine { opacity: 1; }
.drk .cap { position: absolute; inset-inline: 0; bottom: 0; padding: 70px 26px 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.9'/%3E%3Cstop offset='1' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; color: #fff; font-size: 12px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
[dir="rtl"] .drk .cap { letter-spacing: 0; font-size: 14px; }
.drk .cap i { width: 8px; height: 8px; border-radius: 50%; background: #3CCB7F; flex: none; }

/* ── Since 1840 ──────────────────────────────────── */
.heritage { position: relative; background: var(--night); color: #fff; }
.heritage .pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.heritage .pat { position: absolute; inset: 0; background: url("assets/footer-pattern.webp") right bottom / 900px auto no-repeat; opacity: .55; pointer-events: none; }
[dir="rtl"] .heritage .pat { transform: scaleX(-1); }
.heritage .eyebrow { color: var(--sky); }
.heritage .h2 { color: #fff; max-width: 16ch; }
.heritage .h2 .soft { color: var(--sky); }
.her-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-top: clamp(24px, 5vh, 56px); }
.year { font-size: clamp(96px, 17vw, 240px); line-height: 1; font-weight: 300; letter-spacing: -.05em; display: flex; direction: ltr; font-variant-numeric: tabular-nums; }
[dir="rtl"] .year { justify-content: flex-end; letter-spacing: 0; }
.year .dg { display: inline-block; height: 1em; overflow: hidden; }
.year .dg > span { display: block; transition: transform 620ms var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
.year .dg > span > span { display: block; height: 1em; line-height: 1; }
.event { min-height: 7.5em; position: relative; }
.event p { position: absolute; inset: 0 0 auto; margin: 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; color: rgba(255,255,255,.92); max-width: 26ch; }
.event p.out { opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease-in), transform 220ms var(--ease-in); }
.event p.enter { opacity: 0; transform: translateY(16px); }
.event p.now { opacity: 1; transform: none; transition: opacity 480ms var(--ease-out) 120ms, transform 480ms var(--ease-out) 120ms; }
.event .place { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); font-weight: 800; margin-bottom: 12px; }
[dir="rtl"] .event .place { letter-spacing: 0; font-size: 14px; }
.track { position: relative; margin-top: clamp(28px, 6vh, 64px); height: 64px; }
.track .rail { position: absolute; inset-inline: 0; top: 20px; height: 1px; background: rgba(255,255,255,.18); }
.track .fill { position: absolute; inset-inline-start: 0; top: 20px; height: 1px; width: 100%; background: var(--sky); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
[dir="rtl"] .track .fill { transform-origin: 100% 50%; }
.track .node { position: absolute; top: 14px; width: 13px; height: 13px; margin-inline-start: -6px; border-radius: 50%; background: var(--night); border: 1px solid rgba(255,255,255,.4); transition: background 300ms, border-color 300ms, transform 300ms var(--ease-out); padding: 0; }
.track .node:hover { transform: scale(1.3); }
.track .node.past { background: var(--sky); border-color: var(--sky); }
.track .node.cur { transform: scale(1.4); }
.track .node span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; transition: color 300ms; white-space: nowrap; }
.track .node.cur span { color: #fff; font-weight: 700; }
.track .node.last { width: 30px; height: 30px; top: 6px; margin-inline-start: -15px; border-radius: 12%; border: 0; background: transparent; overflow: hidden; direction: ltr; }
.track .node.last img { height: 100%; width: auto; max-width: none; opacity: .4; transition: opacity 400ms; }
.track .node.last.cur img { opacity: 1; }
.track .node.last.cur { box-shadow: 0 0 0 1.5px var(--sky); transform: scale(1.5); overflow: hidden; }
.track .node.last span { top: 38px; }
.her-ends { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 18px; font-weight: 700; }
[dir="rtl"] .her-ends { letter-spacing: 0; font-size: 13px; }

/* ── Eleven centres ──────────────────────────────── */
.centres { padding-block: clamp(96px, 11vw, 150px) clamp(40px, 5vw, 64px); overflow: hidden; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.head-row .lead { margin-top: 0; max-width: 40ch; }
.arrows { display: flex; gap: 8px; margin-top: 18px; }
.arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; transition: border-color 250ms, background 250ms, color 250ms, transform 150ms var(--ease-out), opacity 250ms; }
.arrows button:hover:not(:disabled) { border-color: var(--navy); background: var(--navy); color: #fff; }
.arrows button:active { transform: scale(.92); }
.arrows button:disabled { opacity: .35; cursor: default; }
.arrows svg { width: 16px; height: 16px; }
[dir="rtl"] .arrows svg { scale: -1 1; }
.rail-wrap { position: relative; }
.c-track { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); padding-block: 4px 8px; cursor: grab; overscroll-behavior-x: contain; }
.c-track::-webkit-scrollbar { display: none; }
.c-track.dragging { cursor: grabbing; }
.c-track.dragging a { pointer-events: none; }
.ccard { position: relative; flex: none; width: clamp(250px, 23vw, 316px); aspect-ratio: 3 / 4; border-radius: var(--r-card); color: #fff; background: var(--navy); isolation: isolate; user-select: none; -webkit-user-drag: none; transition: transform 150ms var(--ease-out); }
.ccard .clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; }
.ccard img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); -webkit-user-drag: none; pointer-events: none; }
.ccard:hover img { transform: scale(1.06); }
.ccard .clip::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.92'/%3E%3Cstop offset='0.48' stop-color='%23071A33' stop-opacity='0.25'/%3E%3Cstop offset='1' stop-color='%23071A33' stop-opacity='0.12'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.ccard .top { position: absolute; z-index: 2; top: 18px; inset-inline: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
.ccard .ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); transition: background 300ms, transform 400ms var(--ease-out); }
.ccard .ico i { width: 22px; height: 22px; background: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: background 300ms; }
.ccard:hover .ico { background: #fff; transform: translateY(-2px) scale(1.06); }
.ccard:hover .ico i { background: var(--navy); }
.ccard .bot { position: absolute; z-index: 2; inset-inline: 20px; bottom: 18px; }
.ccard h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.15; }
.ccard .meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.82); padding-top: 12px; border-top: 1px solid rgba(255,255,255,.22); }
.ccard .ex { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .12em; font-size: 11px; color: #fff; }
[dir="rtl"] .ccard .ex { letter-spacing: 0; font-size: 13px; }
.ccard .ex svg { width: 12px; height: 12px; transition: transform 300ms var(--ease-out); }
[dir="rtl"] .ccard .ex svg { scale: -1 1; }
.ccard:hover .ex svg { transform: translateX(4px); }
[dir="rtl"] .ccard:hover .ex svg { transform: translateX(-4px); }
.ccard:active { transform: scale(.985); }
.rail-fade { position: absolute; top: 0; bottom: 0; width: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); pointer-events: none; z-index: 2; }
.rail-fade.s { inset-inline-start: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.rail-fade.e { inset-inline-end: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
[dir="rtl"] .rail-fade.s { background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
[dir="rtl"] .rail-fade.e { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
/* One pathway: a single line with a stop for every centre, filling as you move along it */
.pathway { position: relative; margin-top: 30px; height: 34px; }
.pathway .base, .pathway .fill { position: absolute; inset-inline: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--line); }
.pathway .fill { background: var(--navy); transform-origin: 0 50%; transform: scaleX(var(--p, .2)); }
[dir="rtl"] .pathway .fill { transform-origin: 100% 50%; }
.pathway button { position: absolute; top: 0; width: 16px; height: 16px; margin-inline-start: -8px; border-radius: 50%; border: 2px solid var(--line); background: #fff; padding: 0; transition: border-color 250ms, background 250ms, transform 250ms var(--ease-out); }
.pathway button.on { border-color: var(--navy); background: var(--navy); }
.pathway button:hover { transform: scale(1.25); }
.pathway button span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Specialty index ─────────────────────────────── */
.index { padding-block: clamp(48px, 6vw, 80px) clamp(96px, 11vw, 140px); }
.index .lead b { color: var(--navy); }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
.col { position: relative; padding-top: 18px; }
.col::before, .col::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
[dir="rtl"] .col::before, [dir="rtl"] .col::after { transform-origin: 100% 50%; }
.col::before { transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
.col::after { height: 2px; top: -1px; background: var(--navy); transform: scaleX(0); transition: transform 500ms var(--ease-out); }
.col:hover::after, .col:focus-within::after { transform: scaleX(1); }
.js .cols:not(.in) .col::before { transform: scaleX(0); }
.col h3 { margin: 0 0 12px; font-size: 19px; color: var(--navy); display: flex; justify-content: space-between; gap: 10px; line-height: 1.25; }
.col h3 small { font-size: 11px; color: var(--muted); font-weight: 500; padding-top: 4px; font-variant-numeric: tabular-nums; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.col li a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink-2); padding: 2px 0; transition: color 200ms; }
.col li a svg { width: 11px; height: 11px; opacity: 0; transform: translateX(-4px); transition: opacity 200ms, transform 300ms var(--ease-out); }
[dir="rtl"] .col li a svg { scale: -1 1; transform: translateX(4px); }
.col li a:hover { color: var(--navy); }
.col li a:hover svg { opacity: 1; transform: none; }
.fam { margin-top: 48px; padding: 18px 18px 18px 28px; border-radius: 20px; background: var(--cream); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; }
[dir="rtl"] .fam { padding: 18px 28px 18px 18px; }

/* ── World leadership ────────────────────────────── */
.lead-sec { background: var(--cream); padding-block: clamp(96px, 11vw, 150px); }
.wl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 20px; }
.quote-card { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 480px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.quote-card .img { position: absolute; inset: -14px; background: url("assets/hero-building.jpg") 62% 50% / cover no-repeat; transform: translate(var(--px, 0), var(--py, 0)); transition: transform 1400ms var(--ease-out); z-index: -1; }
.quote-card::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.9'/%3E%3Cstop offset='0.6' stop-color='%23071A33' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; z-index: -1; }
.quote-card .t { padding: 28px; }
.quote-card small { font-size: 11px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,.75); }
[dir="rtl"] .quote-card small { letter-spacing: 0; font-size: 13px; }
.quote-card p { font-size: 24px; line-height: 1.3; margin: 10px 0 0; font-weight: 500; max-width: 20ch; }
.six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; overflow: hidden; }
.six article { position: relative; padding: 26px; min-height: 240px; display: flex; flex-direction: column; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.six article:nth-child(3n) { border-inline-end: 0; }
.six article:nth-child(n+4) { border-bottom: 0; }
.six .hexbg { position: absolute; inset-inline-end: -36px; top: -28px; width: 210px; height: 210px; pointer-events: none; }
[dir="rtl"] .six .hexbg { transform: scaleX(-1); }
.six .hexbg path { fill: none; stroke: rgba(44,107,176,.2); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1400ms var(--ease-out); transition-delay: calc(var(--d, 0ms) + var(--k) * 45ms); }
.six.in .hexbg path { stroke-dashoffset: 0; }
.six .rank { position: relative; font-size: 11px; letter-spacing: .14em; font-weight: 800; color: var(--blue); text-transform: uppercase; }
[dir="rtl"] .six .rank { letter-spacing: 0; font-size: 13px; }
.six h3 { position: relative; margin: 10px 0 0; font-size: 21px; line-height: 1.2; color: var(--navy); max-width: 14ch; }
.six p { position: relative; margin: auto 0 0; padding-top: 24px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.numbers { margin-top: clamp(64px, 7vw, 96px); }
.numbers h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; color: var(--navy); margin: 0 0 24px; }
.numbers h3 span { font-weight: 300; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { position: relative; padding: 28px 24px 12px; border-inline-end: 1px solid var(--line); }
.stat:first-child { padding-inline-start: 0; }
.stat:last-child { border-inline-end: 0; }
.stat::before { content: ""; position: absolute; inset-inline-start: 0; top: -1px; height: 2px; width: 100%; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1200ms var(--ease-out); transition-delay: calc(200ms + var(--i) * 120ms); }
[dir="rtl"] .stat::before { transform-origin: 100% 50%; }
.stats.in .stat::before { transform: scaleX(1); }
.odo { display: flex; align-items: flex-start; font-size: clamp(52px, 6.4vw, 92px); line-height: 1; font-weight: 300; color: var(--navy); letter-spacing: -.04em; direction: ltr; font-variant-numeric: tabular-nums; }
[dir="rtl"] .odo { justify-content: flex-end; letter-spacing: 0; }
.odo .dg { display: inline-block; height: 1em; overflow: hidden; }
.odo .dg > span { display: block; }
.odo .dg > span > span { display: block; height: 1em; }
.odo .plus { font-size: .4em; color: var(--blue-2); margin-inline-start: 4px; margin-top: .18em; }
.stat .lbl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--navy); margin-top: 14px; }
[dir="rtl"] .stat .lbl { letter-spacing: 0; font-size: 14px; }

/* ── Consultants ─────────────────────────────────── */
.docs-sec { padding-block: clamp(96px, 11vw, 150px); }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.chip { position: relative; z-index: 1; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 500; color: var(--navy);
  transition: border-color 250ms, color 250ms, transform 150ms var(--ease-out); }
.chip:hover { border-color: var(--navy); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { color: #fff; border-color: transparent; }
.chips .slide { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 999px; background: var(--navy); transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), height 420ms var(--ease-out); }
.docs { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.feat { position: relative; border-radius: var(--r-card); background: var(--tint); min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.feat .ph { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background: var(--tint); }
.feat .ph img { position: absolute; inset-block: 0; inset-inline-end: 0; width: 72%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; transition: clip-path 640ms var(--ease-surface); clip-path: inset(0 0 0 0); }
[dir="rtl"] .feat .ph img { inset-inline-end: auto; inset-inline-start: 0; }
.feat.swap .ph img { clip-path: inset(0 0 100% 0); }
.feat .txt { padding: 34px; padding-top: 140px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23E8EBF0'/%3E%3Cstop offset='0.58' stop-color='%23E8EBF0'/%3E%3Cstop offset='1' stop-color='%23E8EBF0' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; border-radius: 0 0 var(--r-card) var(--r-card); }
.feat .badge { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--blue); }
[dir="rtl"] .feat .badge { letter-spacing: 0; font-size: 13px; }
.feat h3 { margin: 10px 0 6px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; color: var(--navy); letter-spacing: -.02em; }
.feat .role { font-size: 15px; color: var(--ink-2); max-width: 48ch; }
.feat blockquote { margin: 18px 0 0; font-size: 19px; line-height: 1.45; color: var(--navy); max-width: 42ch; font-weight: 500; }
.feat .txt > * { transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
.feat.swap .txt > * { opacity: 0; transform: translateY(10px); }
.feat .actions { margin-top: 22px; }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.dcard { position: relative; border-radius: var(--r-card); background: var(--tint); min-height: 291px; border: 0; padding: 0; text-align: start; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;
  transition: transform 150ms var(--ease-out), opacity 300ms var(--ease-out), translate 420ms var(--ease-out); }
.dcard .clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; background: var(--tint); }
.dcard img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; transition: transform 700ms var(--ease-out); }
.dcard:hover img { transform: scale(1.05); }
.dcard:active { transform: scale(.985); }
.dcard .t { padding: 80px 18px 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.92'/%3E%3Cstop offset='1' stop-color='%23071A33' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; color: #fff; border-radius: 0 0 var(--r-card) var(--r-card); }
.dcard b { display: block; font-size: 17px; line-height: 1.2; }
.dcard small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; opacity: .8; margin-top: 4px; line-height: 1.35; }
.dcard.out { opacity: 0; translate: 0 10px; }
.dcard.empty { visibility: hidden; }
.fly { position: fixed; z-index: 60; pointer-events: none; border-radius: var(--r-card); overflow: hidden; background: var(--tint); }
.fly img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }

/* ── An extension of London ──────────────────────── */
.ext { position: relative; background: var(--navy); color: #fff; padding-block: clamp(96px, 11vw, 150px); }
.ext .ghost-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ext .ghost { position: absolute; inset-inline-end: -5%; bottom: -22%; width: min(50vw, 620px); aspect-ratio: 1; border-radius: 12%; opacity: 0; transform: translateY(40px); transition: transform 1400ms var(--ease-out), opacity 1400ms var(--ease-out); pointer-events: none; }
.ext .ghost img { filter: brightness(0) invert(1); }
.ext .ghost.in { transform: none; opacity: .065; }
.ext .eyebrow { color: var(--sky); }
.ext .h2 { color: #fff; max-width: 22ch; position: relative; }
.vm { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border-top: 1px solid rgba(255,255,255,.18); }
.vm > div { padding: 34px 40px 10px 0; }
.vm > div + div { border-inline-start: 1px solid rgba(255,255,255,.18); padding-inline: 40px 0; }
[dir="rtl"] .vm > div { padding: 34px 0 10px 40px; }
[dir="rtl"] .vm > div + div { padding-inline: 40px 0; }
.vm svg { width: 30px; height: 30px; color: var(--sky); }
.vm svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1200ms var(--ease-out) 300ms; }
.vm.in svg * { stroke-dashoffset: 0; }
.vm .n { display: block; font-size: 12px; color: var(--sky); margin: 18px 0 6px; font-weight: 700; }
.vm h3 { margin: 0 0 10px; font-size: 26px; }
.vm p { margin: 0; color: rgba(255,255,255,.76); max-width: 50ch; }

/* ── Why King's ──────────────────────────────────── */
.why { padding-block: clamp(96px, 11vw, 150px); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.why-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; background: #fff; min-height: 250px; }
.why-card svg { width: 30px; height: 30px; color: var(--navy); }
.why-card svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms var(--ease-out); transition-delay: calc(var(--d, 0ms) + 250ms); }
.why-card.in svg * { stroke-dashoffset: 0; }
.why-card h3 { margin: 22px 0 10px; font-size: 21px; color: var(--navy); line-height: 1.25; }
.why-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.why-end { display: flex; align-items: flex-end; padding: 28px; border-radius: var(--r-card); background: var(--cream); }

/* ── Patient experience: stacked step cards ──────── */
.steps-sec { padding-block: clamp(96px, 11vw, 150px) clamp(48px, 6vw, 80px); background: var(--cream); }
.stack { margin-top: clamp(36px, 5vw, 56px); }
.scard { position: sticky; top: 104px; height: min(620px, calc(100svh - 140px)); border-radius: var(--r-big); overflow: hidden; color: #fff; margin-bottom: 28px; transform-origin: 50% 0; isolation: isolate; }
.scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(var(--zs, 1.06)); }
.scard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.88'/%3E%3Cstop offset='0.55' stop-color='%23071A33' stop-opacity='0.25'/%3E%3Cstop offset='1' stop-color='%23071A33' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Covered by the next card: skip the photo and backdrop blur nobody can see (links stay focusable) */
.scard.covered img, .scard.covered .dim { visibility: hidden; }
.scard.covered .tag, .scard.covered .btn.glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
.scard .dim { position: absolute; inset: 0; background: var(--night); opacity: var(--dim, 0); z-index: 5; pointer-events: none; }
.scard .top { position: absolute; top: 28px; inset-inline: 32px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
.scard .tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; letter-spacing: .12em; font-weight: 800; }
[dir="rtl"] .scard .tag { letter-spacing: 0; font-size: 13px; }
.scard .tag svg { width: 14px; height: 14px; }
.scard .cnt { font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.scard .bot { position: absolute; inset-inline: 32px; bottom: 32px; }
.scard h3 { margin: 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
[dir="rtl"] .scard h3 { letter-spacing: 0; line-height: 1.2; }
.scard p { margin: 12px 0 0; color: rgba(255,255,255,.85); font-size: 18px; max-width: 44ch; }
.scard .actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── App banner ──────────────────────────────────── */
.app-sec { padding-block: clamp(80px, 9vw, 120px); }
/* The banner's two gradients are drawn as SVG images, not CSS gradients: same pixels, but Firefox rasterizes an image once
   instead of repainting a large clipped CSS gradient every scroll frame (42ms frame gaps here before, 17ms after). */
.app { position: relative; border-radius: 32px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop stop-color='%23163048'/%3E%3Cstop offset='1' stop-color='%230B2443'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; color: #fff; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); min-height: 440px; isolation: isolate; }
.app::before { content: ""; position: absolute; inset: 0; background: url("assets/footer-pattern.webp") right bottom / 760px auto no-repeat; opacity: .55; z-index: -1; }
.app .glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='310' cy='310' r='438.4'%3E%3Cstop stop-color='%238FC1FF' stop-opacity='.2'/%3E%3Cstop offset='.62' stop-color='%238FC1FF' stop-opacity='0'/%3E%3C/radialGradient%3E%3Crect width='620' height='620' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; inset-inline-end: -120px; top: -80px; z-index: -1; }
.app .copy { padding: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.app .eyebrow { color: var(--sky); }
.app .h2 { color: #fff; font-weight: 300; }
.app .h2 b { font-weight: 700; }
.app p { color: rgba(255,255,255,.78); margin: 16px 0 0; max-width: 44ch; }
.app .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 14px; background: #fff; color: var(--navy); font-weight: 700; transition: transform 150ms var(--ease-out), background 250ms; }
.store:hover { background: var(--tint); }
.store:active { transform: scale(.97); }
.store svg { width: 20px; height: 20px; }
.app .portal { color: #fff; margin-inline-start: 8px; }
.app .phone { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.app .phone img { width: min(300px, 80%); margin-bottom: -60px; transform: translate(var(--px, 0px), calc(var(--rp, 140px) + var(--py, 0px))); transition: transform 1200ms var(--ease-out); }
.app.in .phone img { --rp: 0px; }

/* ── Footer ──────────────────────────────────────── */
footer { position: relative; background: var(--navy); color: rgba(255,255,255,.72); padding-top: 80px; font-size: 15px; }
footer::before { overflow: hidden; }
footer::before { content: ""; position: absolute; inset: 0; background: url("assets/footer-pattern.webp") left top / 820px auto no-repeat; opacity: .5; pointer-events: none; }
[dir="rtl"] footer::before { transform: scaleX(-1); }
.fgrid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
footer h4 { color: #fff; margin: 0 0 18px; font-size: 17px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
footer ul a { transition: color 200ms; }
footer ul a:hover { color: #fff; }
footer .contact li { display: flex; gap: 10px; align-items: flex-start; }
footer .contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--sky); }
.socials { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 56px; border-block: 1px solid rgba(255,255,255,.12); }
.socials a { display: flex; align-items: center; gap: 12px; padding: 20px 20px 20px 0; color: #fff; font-size: 17px; border-inline-end: 1px solid rgba(255,255,255,.12); transition: background 250ms; }
.socials a + a { padding-inline-start: 20px; }
.socials a:last-child { border-inline-end: 0; }
.socials a:hover { background: rgba(255,255,255,.04); }
.socials .si { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: background 250ms, color 250ms, transform 450ms var(--ease-out); flex: none; }
.socials .si svg { width: 16px; height: 16px; }
.socials a:hover .si { background: #fff; color: var(--navy); transform: rotate(-8deg) scale(1.06); }
.socials .ne { margin-inline-start: auto; width: 16px; height: 16px; opacity: .6; transition: transform 300ms var(--ease-out), opacity 250ms; }
.socials a:hover .ne { transform: translate(3px, -3px); opacity: 1; }
[dir="rtl"] .socials .ne { scale: -1 1; }
[dir="rtl"] .socials a:hover .ne { transform: translate(-3px, -3px); }
.legal { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; }
.legal nav { display: flex; gap: 20px; flex-wrap: wrap; }
.legal a:hover { color: #fff; }
.sdaia { position: relative; font-size: 12px; color: rgba(255,255,255,.45); margin: 14px 0 0; }
/* The footer's logo you can play with (magic-qaider sections/footer-logo.md) */
.play { position: relative; height: clamp(170px, 20vw, 280px); margin-top: 36px; cursor: crosshair; }
.play canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.play .hint { position: absolute; top: 0; inset-inline-end: var(--gutter); font-size: 12px; color: rgba(255,255,255,.4); }
.play .static { position: absolute; inset: 0; display: none; place-items: center; }
.no-canvas .play .static { display: grid; }
.play .static img { height: 50%; filter: brightness(0) invert(1); opacity: .2; }

/* ── Floating Dr Kings ───────────────────────────── */
.drkings-fab { position: fixed; z-index: 40; bottom: 22px; inset-inline-end: 22px; display: flex; align-items: center; gap: 10px; }
.drkings-fab .bubble { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 700; opacity: 0; transform: translateX(8px) scale(.96); transform-origin: 100% 50%; transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); pointer-events: none; white-space: nowrap; }
[dir="rtl"] .drkings-fab .bubble { transform: translateX(-8px) scale(.96); transform-origin: 0 50%; }
.drkings-fab.say .bubble, .drkings-fab:hover .bubble, .drkings-fab:focus-within .bubble { opacity: 1; transform: none; }
.drkings-fab a { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #fff; background: #0d2c5a; transition: transform 200ms var(--ease-out); outline-offset: 4px; }
.drkings-fab a:hover { transform: scale(1.06); }
.drkings-fab a:active { transform: scale(.94); }
.drkings-fab img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.drkings-fab .on { position: absolute; bottom: 2px; inset-inline-end: 2px; width: 12px; height: 12px; border-radius: 50%; background: #3CCB7F; border: 2px solid #fff; }

/* ── Lab bar ─────────────────────────────────────── */
.lab { position: fixed; z-index: 80; bottom: 16px; inset-inline-start: 16px; display: flex; gap: 4px; align-items: center; background: rgba(17,20,26,.92); color: #fff; border-radius: 999px; padding: 5px; font-size: 13px; direction: ltr; }
.lab button, .lab a { border: 0; background: transparent; color: #fff; border-radius: 999px; padding: 7px 12px; font-weight: 700; }
.lab button[aria-pressed="true"] { background: #fff; color: #11141a; }
.lab .sep { width: 1px; height: 18px; background: rgba(255,255,255,.2); }

/* ── Tablets and phones ──────────────────────────── */
@media (max-width: 1080px) {
  .links, .util nav .hide-s, .nav-actions .btn { display: none; }
  .burger { display: grid; }
  .sym-grid, .wl-grid, .docs, .app { grid-template-columns: 1fr; }
  .drk, [dir="rtl"] .drk { justify-self: stretch; max-width: none; aspect-ratio: 4 / 3.6; }
  .drk .img { background-position: center 18%; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .six { grid-template-columns: 1fr 1fr; }
  .six article:nth-child(3n) { border-inline-end: 1px solid var(--line); }
  .six article:nth-child(2n) { border-inline-end: 0; }
  .six article:nth-child(n+4) { border-bottom: 1px solid var(--line); }
  .six article:nth-child(n+5) { border-bottom: 0; }
  .quote-card { min-height: 340px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-inline-end: 0; }
  .stat:nth-child(3) { padding-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .her-grid { grid-template-columns: 1fr; align-items: start; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .socials { grid-template-columns: 1fr 1fr 1fr; }
  .socials a:nth-child(3) { border-inline-end: 0; }
  .socials a { border-bottom: 1px solid rgba(255,255,255,.12); }
  .socials a:nth-child(4) { padding-inline-start: 0; }
  .app .phone img { width: 240px; margin-bottom: -40px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .util nav > :not(.keep) { display: none; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero { padding: 8px 8px 0; }
  .hero-frame { height: max(600px, calc(100svh - 122px)); }
  .hero-copy { bottom: 232px; inset-inline: 20px; }
  .hero .tile { width: 52px; height: 52px; }
  .quick { grid-template-columns: 1fr; inset-inline: 12px; bottom: 12px; }
  .quick a { padding: 12px 14px; gap: 12px; border-radius: 0 !important; }
  .quick a:first-child { border-start-start-radius: 22px !important; border-start-end-radius: 22px !important; }
  .quick a:last-child { border-end-start-radius: 22px !important; border-end-end-radius: 22px !important; }
  .quick .qi { width: 38px; height: 38px; border-radius: 12px; }
  .quick b { font-size: 15px; }
  .cols { grid-template-columns: 1fr; gap: 28px; }
  .six { grid-template-columns: 1fr; }
  .six article { min-height: 0; border-inline-end: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .six article:last-child { border-bottom: 0 !important; }
  .grid4 { gap: 12px; }
  .dcard { min-height: 230px; }
  .feat { min-height: 520px; }
  .feat .ph img { width: 100%; height: 62%; inset-block: 0 auto; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card { min-height: 0; }
  .scard { top: 88px; height: calc(100svh - 120px); }
  .scard .top, .scard .bot { inset-inline: 20px; }
  .scard .top { top: 20px; }
  .scard .bot { bottom: 22px; }
  .fam { flex-direction: column; align-items: flex-start; }
  .fgrid { grid-template-columns: 1fr; }
  .socials { grid-template-columns: 1fr; }
  .socials a, .socials a + a { padding-inline: 0; border-inline-end: 0; }
  .event { min-height: 9em; }
  .track .node span { display: none; }
  .track .node.cur span, .track .node.last span { display: block; }
  .pathway button span { display: none; }
  .drkings-fab { bottom: 16px; inset-inline-end: 14px; }
  .drkings-fab a { width: 52px; height: 52px; }
  .lab { bottom: 12px; inset-inline-start: 12px; }
}

/* ── Reduced motion: keep the meaning, drop the travel ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 200ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
  .js [data-rise], .js [data-words]:not(.in) .w > span { transform: none; }
  .window .media, .drk .img, .quote-card .img, .app .phone img { transform: none !important; }
  .scard { position: relative; top: auto; }
}

/* ═══ v2.1 · more motion, all from the kit's own family ═══ */

/* A navy section rises over the page with the loader's curved hem, which flattens as it arrives (recipe 6: bring one of our own moves back) */
.navy-in { position: relative; }
.hem { position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; margin-bottom: -1px; pointer-events: none; z-index: 2; transform-origin: 50% 100%; transform: scaleY(var(--hem, 0)); }
.hem svg { width: 100%; height: 100%; display: block; }
.heritage .hem path { fill: var(--night); }
.ext .hem path, footer .hem path { fill: var(--navy); }

/* Big photographs wipe up into place and settle (one media reveal for the whole site) */
.js [data-reveal] { clip-path: inset(100% 0 0 0 round var(--r-card)); transition: clip-path 1150ms var(--ease-surface) var(--d, 0ms); }
.js [data-reveal].in { clip-path: inset(0 0 0 0 round var(--r-card)); }
.js [data-reveal] .img, .js [data-reveal] .clip img { scale: 1.16; transition: scale 1600ms var(--ease-out) var(--d, 0ms), transform 1200ms var(--ease-out); }
.js [data-reveal].in .img, .js [data-reveal].in .clip img { scale: 1; }
.ccard[data-reveal] { transition: clip-path 1150ms var(--ease-surface) var(--d, 0ms), transform 150ms var(--ease-out); }

/* A centre card opens on hover to list its specialties (the index's own content) */
.ccard .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--ease-out); }
.ccard .more > ul { overflow: hidden; list-style: none; margin: 0; padding: 0; }
.ccard .more li { font-size: 13.5px; color: rgba(255,255,255,.86); padding: 3px 0; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
.ccard .more li:last-child { padding-bottom: 12px; }
.ccard:hover .more, .ccard:focus-visible .more { grid-template-rows: 1fr; }
.ccard:hover .more li, .ccard:focus-visible .more li { opacity: 1; transform: none; transition-delay: calc(120ms + var(--j) * 40ms); }
.ccard .clip::after { transition: background 500ms var(--ease-out); }
.ccard:hover .clip::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23071A33' stop-opacity='0.95'/%3E%3Cstop offset='0.6' stop-color='%23071A33' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%23071A33' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.c-track.dragging .ccard .more { grid-template-rows: 0fr !important; }

/* The index cascades: each column's title, then its specialties, one after another */
.js .cols:not(.in) .col h3, .js .cols:not(.in) .col li { opacity: 0; transform: translateY(10px); }
.col h3, .col li { transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i) * 60ms + 150ms); }
.col li { transition-delay: calc(var(--i) * 60ms + 240ms + var(--j) * 35ms); }
.col li a { transition: color 200ms; }
.col li a:hover { transform: translateX(3px); }
[dir="rtl"] .col li a:hover { transform: translateX(-3px); }
.col li a { display: inline-flex; transition: color 200ms, transform 300ms var(--ease-out); }

/* The year blurs for a moment while it rolls */
.year .dg > span { transition: transform 620ms var(--ease-out), filter 260ms var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
.year.rolling .dg > span { filter: blur(3px); }

/* Reading progress, a hairline on the floating bar */
.readline { position: absolute; left: max(28px, calc((100% - 1340px) / 2 + 18px)); right: max(28px, calc((100% - 1340px) / 2 + 18px)); bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; transition: opacity 400ms var(--ease-out); pointer-events: none; }
.readline i { position: absolute; inset: 0; background: var(--navy); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
[dir="rtl"] .readline i { transform-origin: 100% 50%; }
.nav.float .readline { opacity: .7; }

/* Step titles rise as each card slides in */
.scard h3 .w > span { transition-duration: 900ms; }

/* The featured consultant's name rises with each swap */
.feat h3 .w > span { transition-duration: 700ms; }

/* Stats: the plus sign arrives last */
.odo .plus { transition: opacity 400ms var(--ease-out) 1300ms, transform 500ms var(--ease-out) 1300ms; }
.js .stats:not(.in) .odo .plus { opacity: 0; transform: translateY(6px) scale(.6); }

/* The hero headline drifts up and lets go as the film settles back */
.hero .h1 { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .hem { display: none; }
  .js [data-reveal] { clip-path: none !important; }
  .js [data-reveal] .img, .js [data-reveal] .clip img { scale: 1 !important; }
  .js .cols:not(.in) .col h3, .js .cols:not(.in) .col li { opacity: 1; transform: none; }
}

/* Page switch: arriving covered, the loader skips its arrival and only leaves */
.switching .loader .logo-fly .tilepart, .switching .loader .logo-fly .wordpart { animation: none !important; opacity: 1; }
.switching .loader .logo-fly .wordpart { clip-path: inset(0 0 0 20%); }
.switching .loader .hexes { opacity: 0; }
.loading-out .loader { display: block !important; }

/* The featured consultant's name is a link to their card on the Doctors page */
.feat-link { display: inline-flex; align-items: flex-end; gap: 12px; color: inherit; }
.feat-link .fl-arr { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 10px; flex: none; transition: background 250ms, color 250ms, border-color 250ms; }
.feat-link .fl-arr svg { width: 15px; height: 15px; transform: rotate(-45deg); transition: transform 300ms var(--ease-out); }
[dir="rtl"] .feat-link .fl-arr svg { transform: rotate(-135deg); }
.feat-link:hover .fl-arr { background: var(--navy); color: #fff; border-color: var(--navy); }
.feat-link:hover .fl-arr svg { transform: none; }
[dir="rtl"] .feat-link:hover .fl-arr svg { transform: scaleX(-1); }

/* ═══ v3 · max motion, shared by every page ═══ */

/* Heading words rise out of a soft blur */
.w > span { transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out), opacity 700ms var(--ease-out); transition-delay: calc(var(--i) * 45ms + var(--wd, 0ms)); }
.js [data-words]:not(.in) .w > span { filter: blur(8px); opacity: 0; }

/* 3D tilt: a glare follows the pointer across the card */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 7;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 55%); opacity: 0; transition: opacity 400ms var(--ease-out); mix-blend-mode: soft-light; }
[data-tilt].tilting::after { opacity: 1; }
.doc[data-tilt]::after { mix-blend-mode: normal; background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(143,193,255,.16), rgba(255,255,255,0) 60%); }

/* Fast scrolling leans the photo rows; they settle when you stop */
.c-track .ccard { transform: skewX(calc(var(--vel, 0) * -3deg)); }
.c-track .ccard:active { transform: skewX(calc(var(--vel, 0) * -3deg)) scale(.985); }

/* Magnetic controls keep their own press */
.btn, .store { translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .js [data-words]:not(.in) .w > span { filter: none; opacity: 1; }
  .c-track .ccard { transform: none; }
}
.why-card { position: relative; }
/* A soft light follows the pointer across the hero film and the app card */
.window::after, .app::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 600ms var(--ease-out);
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.16), rgba(255,255,255,0) 60%); }
.window:hover::after, .app:hover::after { opacity: 1; }

/* Lab controls stay out of the design; add ?lab=1 to the address to show them */
.lab { display: none !important; }
.lab-on .lab { display: flex !important; }

/* ═══ v4 · one step further ═══ */
/* Hero scroll scene: the headline lifts away word by word, each a little faster than the one before */
.hero .h1 .w { transform: translateY(calc(var(--hp, 0) * (-36px - var(--wi, 0) * 9px))); }

/* Numbers acted out: the building's facade hexes fill on the same clock as the digits (one hex = 10) */
.hexf { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 16px; max-width: 250px; }
.hexf i { width: 9px; height: 10px; background: var(--line); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background 260ms var(--ease-out), transform 360ms var(--ease-out); transform: scale(.75); }
.hexf i.on { background: var(--blue); transform: none; }
.hexf i.on:nth-child(3n) { background: var(--blue-2); }
.hexf i.on:nth-child(7n) { background: #A9C8EA; }
.stat:hover .hexf i.on { transform: scale(1.12); transition-delay: calc(var(--n, 0) * 4ms); }
.hexkey { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* Why King's: each icon acts out its meaning on hover */
.why-card svg { overflow: visible; }
.why-card:is(:hover, .on) svg * { animation: redrawW 900ms var(--ease-out); }
@keyframes redrawW { from { stroke-dashoffset: 100; } }
.why-card.perf-0:is(:hover, .on) svg circle:last-child { animation: pulseDot 900ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes pulseDot { 40% { transform: scale(2.2); } 100% { transform: none; } }
.why-card.perf-2:is(:hover, .on) svg { animation: leanTogether 800ms var(--ease-out); }
@keyframes leanTogether { 40% { transform: rotate(-6deg) translateX(-2px); } 100% { transform: none; } }
.why-card.perf-3:is(:hover, .on) svg path:first-child { animation: turnSpark 900ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
@keyframes turnSpark { 50% { transform: rotate(45deg) scale(1.15); } 100% { transform: rotate(90deg); } }
.why-card.perf-4:is(:hover, .on) svg { animation: beat 900ms var(--ease-out); }
@keyframes beat { 18% { transform: scale(1.18); } 32% { transform: scale(.96); } 48% { transform: scale(1.1); } 100% { transform: none; } }
.why-card { transition: border-color 300ms var(--ease-out); }
.why-card:hover { border-color: rgba(11,36,67,.28); }
@media (prefers-reduced-motion: reduce) {
  .hero .h1 .w { transform: none; }
  .why-card:hover svg, .why-card:hover svg * { animation: none; }
}

/* ═══ v5 · visitor features ═══ */
/* Search everything */
.nav-search { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; transition: border-color 250ms, transform 150ms var(--ease-out); }
.nav-search:hover { border-color: var(--navy); }
.nav-search:active { transform: scale(.92); }
.nav-search svg { width: 17px; height: 17px; }
.kbd-hint { font: 600 10px/1 var(--font); padding: 3px 5px; border-radius: 5px; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); margin-inline-start: 2px; }
.sx { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; }
.sx-open .sx { visibility: visible; pointer-events: auto; }
.sx-back { position: absolute; inset: 0; background: rgba(7,26,51,.48); opacity: 0; transition: opacity 360ms var(--ease-out); }
.sx-open .sx-back { opacity: 1; }
.sx-panel { position: absolute; top: min(12vh, 110px); left: 50%; width: min(680px, calc(100vw - 24px)); max-height: min(640px, calc(100svh - 140px)); transform: translateX(-50%) translateY(-10px) scale(.97); opacity: 0;
  background: #fff; border-radius: 24px; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out); }
.sx-open .sx-panel { opacity: 1; transform: translateX(-50%); }
.sx-field { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.sx-field > svg { width: 20px; height: 20px; color: var(--navy); flex: none; }
.sx-field input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 19px; color: var(--ink); background: transparent; }
kbd, .sx kbd { font: 600 11px/1 var(--font); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); background: var(--tint); }
.sx-list { overflow-y: auto; padding: 8px; flex: 1; overscroll-behavior: contain; }
.sx-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
[dir="rtl"] .sx-h { letter-spacing: 0; font-size: 12.5px; }
.sx-h small { font-weight: 500; letter-spacing: 0; }
.sx-clear { border: 0; background: none; color: var(--navy); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 8px; }
.sx-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; color: var(--navy); transition: border-color 200ms; }
.sx-chip:hover { border-color: var(--navy); }
.sx-row { position: relative; display: grid; grid-template-columns: 44px 1fr 28px; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 14px; color: var(--navy); isolation: isolate;
  opacity: 0; transform: translateY(8px); animation: sxIn 420ms var(--ease-out) forwards; animation-delay: calc(var(--j) * 28ms); }
@keyframes sxIn { to { opacity: 1; transform: none; } }
.sx-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--tint); z-index: -1; transform: scaleX(.96); opacity: 0; transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out); }
.sx-row.on::before { opacity: 1; transform: none; }
.sx-av, .sx-ic { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--tint); display: grid; place-items: center; color: var(--navy); }
.sx-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }
.sx-av i { font-style: normal; font-size: 18px; }
.sx-ic svg { width: 20px; height: 20px; }
.sx-row.on .sx-ic { background: var(--navy); color: #fff; }
.sx-tx { min-width: 0; line-height: 1.3; }
.sx-tx b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-tx small { display: block; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-row mark { background: rgba(143,193,255,.5); color: inherit; border-radius: 3px; }
.sx-go { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; opacity: 0; transform: translateX(-6px); transition: opacity 200ms, transform 300ms var(--ease-out); }
[dir="rtl"] .sx-go { transform: translateX(6px); }
.sx-go svg { width: 14px; height: 14px; }
[dir="rtl"] .sx-go svg { scale: -1 1; }
.sx-row.on .sx-go { opacity: 1; transform: none; }
.sx-empty { padding: 40px 20px; text-align: center; color: var(--ink-2); }
.sx-empty p { font-size: 17px; color: var(--navy); margin: 0 0 6px; }
.sx-foot { display: flex; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.sx-foot span { display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 680px) { .sx-panel { top: 12px; max-height: calc(100svh - 24px); } .sx-foot, .sx-esc { display: none; } }

/* Accessibility panel */
.a11y { position: fixed; z-index: 110; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; color: var(--navy);
  opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: 85% 0; visibility: hidden; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s 320ms; }
[dir="rtl"] .a11y { transform-origin: 15% 0; }
.a11y.on { opacity: 1; transform: none; visibility: visible; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s; }
.a11y-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.a11y-h b { font-size: 16px; }
.a11y-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--tint); display: grid; place-items: center; color: var(--navy); }
.a11y-x svg { width: 13px; height: 13px; }
.a11y-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.a11y-seg { position: relative; display: flex; background: var(--tint); border-radius: 999px; padding: 3px; }
.a11y-seg button { position: relative; z-index: 1; width: 40px; height: 32px; border: 0; background: none; border-radius: 999px; color: var(--navy); font-weight: 700; transition: color 250ms; }
.a11y-seg button[aria-pressed="true"] { color: #fff; }
.a11y-seg .knob { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--navy); transition: transform 360ms var(--ease-out), width 360ms var(--ease-out); }
.sw { position: relative; width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--line); transition: background 280ms var(--ease-out); }
.sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 340ms var(--ease-out), width 200ms var(--ease-out); }
.sw:active i { width: 28px; }
.sw[aria-checked="true"] { background: var(--navy); }
.sw[aria-checked="true"] i { transform: translateX(20px); }
.sw[aria-checked="true"]:active i { transform: translateX(16px); }
[dir="rtl"] .sw i { left: auto; right: 3px; }
[dir="rtl"] .sw[aria-checked="true"] i { transform: translateX(-20px); }
.a11y-f { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-2); }
.a11y-reset { border: 0; background: none; color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* the choices themselves */
html.txt-1 main, html.txt-1 footer { zoom: 1.08; }
html.txt-2 main, html.txt-2 footer { zoom: 1.16; }
html.hc { --ink-2: rgba(0,0,0,.9); --muted: rgba(0,0,0,.78); --line: rgba(11,36,67,.4); --line-2: rgba(11,36,67,.22); --soft: #1F4E79; --blue: #1A4F8A; }
html.hc .window .shade { background: linear-gradient(to top, rgba(7,26,51,.95), rgba(7,26,51,.7) 50%, rgba(7,26,51,.45)); }
html.hc a:focus-visible, html.hc button:focus-visible { outline-width: 3px; }
html.rm *, html.rm *::before, html.rm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
html.rm.js [data-rise], html.rm.js [data-words]:not(.in) .w > span { transform: none; opacity: 1; filter: none; }
html.rm .scard { position: relative; top: auto; }

/* Phone action bar */
.mbar { display: none; }
@media (max-width: 680px) {
  .mbar { position: fixed; z-index: 44; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; padding: 6px; border-radius: 22px;
    background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border: 1px solid var(--line);
    transform: translateY(140%); transition: transform 520ms var(--ease-surface); }
  .mbar.on { transform: none; }
  .mbar.on.away { transform: translateY(140%); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 16px; font-weight: 700; font-size: 14.5px; color: var(--navy); transition: transform 150ms var(--ease-out), background 200ms; }
  .mbar a:active { transform: scale(.95); }
  .mbar a svg { width: 18px; height: 18px; }
  .mbar .mb-book { background: var(--navy); color: #fff; }
  .mbar img { width: 26px; height: 26px; border-radius: 50%; }
  .menu-open .mbar, .profile-open .mbar, .sx-open .mbar { transform: translateY(140%); }
  .drkings-fab { bottom: 84px; transition: bottom 400ms var(--ease-out); }
}

/* ═══ v5 · motion trends ═══ */
/* Pinned centres: the section holds still while the page's scroll walks the row sideways */
.centres.pinned { padding: 0; overflow: visible; }
.centres.pinned .cpin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: 40px; }
.centres.pinned .c-track { overflow: visible; width: max-content; cursor: default; will-change: transform; }
.centres.pinned .rail-fade { display: none; }
.centres.pinned .head-row { margin-bottom: 36px; }

/* The specialty ticker */
.ticker { position: relative; overflow: hidden; padding-block: 26px; border-block: 1px solid var(--line); display: grid; gap: 14px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trow { display: flex; width: max-content; will-change: transform; }
.tset { display: flex; align-items: center; flex: none; }
.ticker a { font-size: clamp(26px, 3.4vw, 46px); font-weight: 300; color: var(--navy); white-space: nowrap; padding: 0 22px; letter-spacing: -.02em; transition: color 300ms var(--ease-out); }
[dir="rtl"] .ticker a { letter-spacing: 0; }
.trow[data-dir="-1"] a { font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--navy); }
.ticker a:hover { color: var(--blue); }
.trow[data-dir="-1"] a:hover { color: var(--navy); }
.ticker i { width: 12px; height: 14px; flex: none; background: var(--blue-2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: .55; }
.tpause { position: absolute; top: 50%; inset-inline-end: 20px; margin-top: -21px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.9); color: var(--navy); display: grid; place-items: center; z-index: 2; opacity: 0; transition: opacity 300ms; }
.ticker:hover .tpause, .tpause:focus-visible { opacity: 1; }
.tpause svg { width: 14px; height: 14px; }

/* The London statement lights word by word as it is read */
.ext .h2.scrub .w { color: rgba(255,255,255, calc(.16 + .84 * var(--lit, 0))); transition: color 200ms linear; }

/* Language switch: the old page lifts away as the new one settles in */
::view-transition-old(root) { animation: vtOut 420ms cubic-bezier(.7,0,.84,0) both; }
::view-transition-new(root) { animation: vtIn 620ms cubic-bezier(.16,1,.3,1) 120ms both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-14px); filter: blur(6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

@media (prefers-reduced-motion: reduce) { .ext .h2.scrub .w { color: #fff; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
html.rm .ext .h2.scrub .w { color: #fff; }

/* Hero title card: navy + façade pattern while the film is stopped; the headline steps aside while it plays */
.window .titlecard { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-surface);
  background: radial-gradient(70% 90% at 85% 15%, rgba(46,111,216,.45), transparent 60%), url("assets/footer-pattern.webp") right -40px bottom -60px / 760px auto no-repeat, var(--navy); }
[dir="rtl"] .window .titlecard { background: radial-gradient(70% 90% at 15% 15%, rgba(46,111,216,.45), transparent 60%), url("assets/footer-pattern.webp") left -40px bottom -60px / 760px auto no-repeat, var(--navy); }
.hero.titled .window .titlecard { opacity: 1; transition-duration: 700ms; }
.hero .h1 .w > span, .hero .h1 .w { transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out); }
.hero.film .h1.in .w { opacity: 0; filter: blur(10px); transition: opacity 520ms var(--ease-in), filter 520ms var(--ease-in); transition-delay: calc(var(--wi, 0) * 35ms); }
.hero.titled .h1.in .w { transition-delay: calc(250ms + var(--wi, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .window .titlecard, .hero.film .h1.in .w { transition: none; } }
html.rm .window .titlecard, html.rm .hero.film .h1.in .w { transition: none; }

/* ═══ Search, in the King's own clothes ═══ */
.sx-closing .sx { visibility: visible; }
.sx-closing .sx-panel { opacity: 1; transform: translateX(-50%); transition: none; }
.sx-closing .sx-back { opacity: 0; transition: opacity 420ms var(--ease-out); }
.sx-panel { border: 0; box-shadow: 0 40px 90px -30px rgba(7,26,51,.6); width: min(720px, calc(100vw - 24px)); }
.sx-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: #fff; overflow: hidden;
  background: radial-gradient(80% 140% at 100% 0%, rgba(46,111,216,.55), transparent 60%), url("assets/footer-pattern.webp") right -60px top -40px / 520px auto no-repeat, var(--navy); }
[dir="rtl"] .sx-head { background: radial-gradient(80% 140% at 0% 0%, rgba(46,111,216,.55), transparent 60%), url("assets/footer-pattern.webp") left -60px top -40px / 520px auto no-repeat, var(--navy); }
.sx-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #8fc1ff, transparent); transform: scaleX(0); animation: sxLine 900ms var(--ease-out) 200ms forwards; }
@keyframes sxLine { to { transform: scaleX(1); } }
.sx-mark { width: 44px; height: 44px; flex: none; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.sx-mark img { width: 30px; height: 30px; object-fit: contain; }
.sx-head .sx-field { flex: 1; padding: 0; border: 0; gap: 12px; }
.sx-head .sx-field > svg { color: var(--sky); }
.sx-head .sx-field input { color: #fff; font-size: 21px; caret-color: var(--sky); }
.sx-head .sx-field input::placeholder { color: rgba(255,255,255,.55); }
.sx-head .sx-esc { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.sx-h { color: var(--blue); gap: 10px; justify-content: flex-start; }
.sx-h::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--sky); flex: none; }
.sx-h .sx-clear, .sx-h small { margin-inline-start: auto; }
/* hexagon tiles, echoing the façade */
.sx-av, .sx-ic { border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); width: 48px; height: 44px; }
.sx-row { grid-template-columns: 48px 1fr 28px; padding: 10px 14px; }
.sx-row::before { background: var(--navy); transform: scaleX(.9); transform-origin: 0 50%; transition: opacity 220ms var(--ease-out), transform 420ms var(--ease-out); }
[dir="rtl"] .sx-row::before { transform-origin: 100% 50%; }
.sx-row::after { content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--sky); opacity: 0; transform: scaleY(.3); transition: opacity 200ms, transform 360ms var(--ease-out); }
.sx-row.on::after { opacity: 1; transform: none; }
.sx-row.on { color: #fff; }
.sx-row.on .sx-tx small { color: rgba(255,255,255,.7); }
.sx-row.on .sx-ic { background: var(--sky); color: var(--navy); }
.sx-row.on .sx-av { background: #e8ebf0; }
.sx-row.on mark { background: rgba(143,193,255,.4); color: #fff; }
.sx-row .sx-go { transition: transform 400ms var(--ease-out); }
.sx-chip { border-color: var(--line); }
.sx-chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.sx-foot { background: var(--tint); }
.sx-mark { direction: ltr; display: block; background: transparent; box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); border-radius: 10px; }
.sx-mark img { height: 44px; width: auto; max-width: none; display: block; }
.sx-mark { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 8px 20px -8px rgba(0,0,0,.5); }
.sx-mark { position: relative; } .sx-mark img { position: absolute; left: 0; top: 0; }
/* the King's tile stays legible on the navy title card and over the film */
.hero .tile { background: #fff; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 18px 40px -16px rgba(0,0,0,.55); }
.hero .tile img { position: relative; z-index: 1; }
.hero .tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.hero.titled.opened .tile::after { animation: tileSheen 1200ms var(--ease-out) 500ms; }
@keyframes tileSheen { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .hero .tile::after { animation: none !important; } }
html.rm .hero .tile::after { animation: none !important; }

/* Performance: no live blur over the playing film (it re-blurs every video frame); the title card stops painting once hidden */
.hero .quick { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(7,26,51,.58); }
.hero .wtag button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(7,26,51,.5); }
.window .titlecard { visibility: hidden; transition: opacity 900ms var(--ease-surface), visibility 0s 900ms; }
.hero.titled .window .titlecard { visibility: visible; transition: opacity 700ms var(--ease-surface), visibility 0s; }
.hero .window, .hero .media { contain: paint; }
/* consultants without a usable photo show the King's mark, contained (as kch.sa does) */
img.kmark { width: 100%; height: 100%; object-fit: contain !important; object-position: center !important; padding: 18%; box-sizing: border-box; mix-blend-mode: normal !important; background: var(--tint); }
/* the ⌘K hint on the navy utility bar: its own colours, so the global kbd rule can't whiten it */
.util .kbd-hint, .kbd-hint { background: rgba(143,193,255,.14) !important; color: #cfe3ff !important; border: 1px solid rgba(143,193,255,.45) !important; }