/* King's College Hospital London – Jeddah · Doctors page
   Same sections and copy as kch.sa/doctors. Builds on styles.css (tokens, chrome, buttons, rim, footer). */

/* ── 1 · Cover: a wall of the consultants, drifting in columns ── */
.dcover { position: relative; padding-block: clamp(40px, 6vh, 72px) 0; overflow: hidden; background: linear-gradient(#fff 0 70%, var(--cream) 70%); }
.dcover-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: min(760px, calc(100svh - 114px)); }
.dcopy { padding-block: 40px 80px; }
.dcover .h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1.02; font-weight: 700; letter-spacing: -.033em; color: var(--navy); margin: 0; max-width: 13ch; }
[dir="rtl"] .dcover .h1 { letter-spacing: 0; line-height: 1.22; }
.dcover .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.wall { position: relative; height: min(760px, calc(100svh - 114px)); border-radius: var(--r-big); overflow: hidden; background: var(--tint); isolation: isolate; }
.wall-cols { position: absolute; inset: -40px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 12px; }
.wall-col { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.wall-col:nth-child(2) { margin-top: -120px; }
.wfac { position: relative; display: block; border: 0; padding: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: #dfe4ea; cursor: pointer; transition: transform 400ms var(--ease-out), filter 400ms var(--ease-out); }
.wfac img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; mix-blend-mode: multiply; transition: transform 700ms var(--ease-out); }
.wfac .mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 300; color: var(--navy); }
.wall.has-hover .wfac { filter: saturate(.6) brightness(1.02); }
.wall.has-hover .wfac:hover { filter: none; }
.wfac:hover img { transform: scale(1.06); }
.wfac:active { transform: scale(.97); }
.wall-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--tint), rgba(232,235,240,0) 14%, rgba(232,235,240,0) 86%, var(--tint)); }
.wall-tip { position: absolute; z-index: 3; pointer-events: none; padding: 8px 14px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 13px; line-height: 1.35; max-width: 240px;
  opacity: 0; transform: translate(-50%, calc(-100% - 10px)) scale(.94); transform-origin: 50% 100%; transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out); }
.wall-tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
.wall-tip small { display: block; opacity: .75; font-size: 12px; }
.wall-pause { position: absolute; bottom: 24px; inset-inline-end: calc(var(--gutter) + 18px); z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: blur(8px); color: var(--navy); display: grid; place-items: center; transition: transform 150ms var(--ease-out), background 250ms; }
.wall-pause:hover { background: #fff; }
.wall-pause:active { transform: scale(.92); }
.wall-pause svg { width: 14px; height: 14px; }
.js .dcover:not(.ready) .wall { clip-path: inset(100% 0 0 0 round var(--r-big)); }
.dcover .wall { clip-path: inset(0 0 0 0 round var(--r-big)); transition: clip-path 1300ms var(--ease-surface) 200ms; }

/* ── 2 · Trust strip ── */
.trust { background: var(--cream); padding-block: 24px 8px; }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.trust-grid > div { padding: 26px 28px 26px 0; display: flex; flex-direction: column; gap: 14px; }
.trust-grid > div + div { border-inline-start: 1px solid var(--line); padding-inline: 28px 0; }
[dir="rtl"] .trust-grid > div { padding: 26px 0 26px 28px; }
[dir="rtl"] .trust-grid > div + div { padding-inline: 28px 0; }
.trust .tl { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
[dir="rtl"] .trust .tl { letter-spacing: 0; font-size: 14px; }
.trust .tv { display: flex; align-items: center; gap: 18px; font-size: clamp(28px, 3vw, 38px); font-weight: 300; color: var(--navy); line-height: 1; }
.week { display: inline-flex; gap: 5px; }
.week i { width: 10px; height: 26px; border-radius: 3px; background: var(--line); transition: background 300ms var(--ease-out); transition-delay: calc(500ms + var(--k) * 110ms); }
.trust-grid.in .week i:nth-child(-n+5) { background: var(--navy); }
.trust-grid.in .week i:nth-child(1) { background: var(--blue); }
.odo2 { display: inline-flex; direction: ltr; font-variant-numeric: tabular-nums; }
.odo2 .dg { display: inline-block; height: 1.15em; overflow: hidden; line-height: 1.15; vertical-align: bottom; transition: width 600ms var(--ease-out); }
.odo2 .dg > span { display: block; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.odo2 .dg > span > span { display: block; height: 1.15em; text-align: center; }

/* ── 3 · Roster ── */
.roster { background: var(--cream); padding-block: clamp(72px, 9vw, 120px) clamp(80px, 9vw, 120px); }
.fbar-wrap { position: sticky; top: 0; z-index: 30; padding-block: 10px; transition: transform 460ms var(--ease-out), background 300ms; }
.fbar-wrap.stuck { background: rgba(245,244,240,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
body:not(.nav-hidden) .fbar-wrap { top: 76px; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.search { position: relative; flex: 1 1 320px; display: flex; align-items: center; height: 50px; border-radius: 999px; background: #fff; border: 1px solid var(--line); padding-inline: 18px 6px; gap: 10px; transition: border-color 250ms, box-shadow 250ms; }
.search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(31,78,121,.08); }
.search > svg { width: 18px; height: 18px; color: var(--navy); flex: none; transition: transform 400ms var(--ease-out); }
.search:focus-within > svg { transform: rotate(-12deg) scale(1.08); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.search input::-webkit-search-cancel-button { display: none; }
.search button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tint); color: var(--navy); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity 200ms, transform 300ms var(--ease-out); pointer-events: none; }
.search button svg { width: 14px; height: 14px; }
.search.has-q button { opacity: 1; transform: none; pointer-events: auto; }
.sel { position: relative; }
.sel > button, .fbtn { height: 50px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); padding-inline: 18px 14px; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; transition: border-color 250ms, transform 150ms var(--ease-out); white-space: nowrap; }
.sel > button:hover, .fbtn:hover { border-color: var(--navy); }
.sel > button:active, .fbtn:active { transform: scale(.97); }
.sel > button svg { width: 12px; height: 12px; transition: transform 300ms var(--ease-out); }
.sel.open > button svg { transform: rotate(180deg); }
.sel > button small { color: var(--muted); font-size: 13px; }
.fbtn svg { width: 16px; height: 16px; }
.badge-n { min-width: 20px; height: 20px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 6px; transform: scale(0); transition: transform 300ms var(--ease-out); }
.badge-n.on { transform: none; }
.menu-list, .pop { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40; min-width: 240px; max-height: 360px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px;
  opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: 20% 0; visibility: hidden; transition: opacity 200ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s 280ms; }
.sel.sort .menu-list { inset-inline-start: auto; inset-inline-end: 0; transform-origin: 80% 0; }
.sel.open .menu-list, .more-wrap.open .pop { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s; }
.menu-list button { width: 100%; text-align: start; display: flex; justify-content: space-between; gap: 12px; border: 0; background: none; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; color: var(--navy); transition: background 180ms; }
.menu-list button:hover, .menu-list button:focus-visible { background: var(--tint); }
.menu-list button[aria-selected="true"] { font-weight: 700; }
.menu-list button small { color: var(--muted); font-variant-numeric: tabular-nums; }
.more-wrap { position: relative; }
.pop { width: 300px; padding: 16px; max-height: none; }
.pop h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
[dir="rtl"] .pop h4 { letter-spacing: 0; font-size: 13px; }
.pop .seg { position: relative; display: flex; background: var(--tint); border-radius: 999px; padding: 3px; margin-bottom: 16px; }
.pop .seg button { position: relative; z-index: 1; flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 999px; font-size: 13.5px; color: var(--navy); transition: color 250ms; }
.pop .seg button[aria-pressed="true"] { color: #fff; }
.pop .seg .knob { position: absolute; z-index: 0; top: 3px; bottom: 3px; border-radius: 999px; background: var(--navy); transition: transform 360ms var(--ease-out), width 360ms var(--ease-out); }
.pop .clear { border: 0; background: none; color: var(--navy); font-weight: 700; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.count { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-2); font-size: 14px; margin-inline-start: auto; }
.count b { font-size: 22px; color: var(--navy); font-weight: 700; }
.active-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.active-chips:not(:empty) { margin-top: 10px; }
.achip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-inline: 14px 6px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13.5px; border: 0; animation: chipIn 320ms var(--ease-out); }
.achip i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-style: normal; transition: background 200ms; }
.achip:hover i { background: rgba(255,255,255,.32); }
@keyframes chipIn { from { opacity: 0; transform: scale(.9); } }
.az { position: relative; display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; }
.az:empty { display: none; }
.az button { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--navy); transition: color 250ms, transform 150ms var(--ease-out); }
.az button:disabled { color: rgba(11,36,67,.22); cursor: default; }
.az button:not(:disabled):hover { transform: translateY(-2px); }
.az button.cur { color: #fff; }
.az .az-pill { position: absolute; z-index: 0; top: 0; left: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--navy); transition: transform 380ms var(--ease-out), opacity 250ms; opacity: 0; }
.az.has-cur .az-pill { opacity: 1; }

.results { margin-top: 28px; position: relative; }
.group { margin-top: 44px; }
.group:first-child { margin-top: 12px; }
.ghead { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); scroll-margin-top: 220px; }
.ghead h3 { margin: 0; font-size: clamp(40px, 6vw, 64px); line-height: 1; font-weight: 300; color: var(--navy); }
.ghead span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
[dir="rtl"] .ghead span { letter-spacing: 0; font-size: 13px; }
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.doc { position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line-2); text-align: start; padding: 0; color: inherit; transition: transform 150ms var(--ease-out); scroll-margin-top: 240px; }
.doc:active { transform: scale(.985); }
.doc .ph { position: relative; aspect-ratio: 4 / 4.2; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; background: var(--tint); }
.doc .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; transition: transform 800ms var(--ease-out); }
.doc:hover .ph img { transform: scale(1.05); }
.doc .ph .mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 300; color: var(--navy); }
.doc .chair { position: absolute; top: 12px; inset-inline-start: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
[dir="rtl"] .doc .chair { letter-spacing: 0; font-size: 12px; }
.doc .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.doc .spec { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
[dir="rtl"] .doc .spec { letter-spacing: 0; font-size: 12.5px; }
.doc h4 { margin: 2px 0 0; font-size: 18px; line-height: 1.2; color: var(--navy); }
.doc .role { font-size: 14px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc .foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-2); margin-top: 12px; }
.doc .view { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); opacity: 0; transform: translateX(-6px); transition: opacity 250ms, transform 350ms var(--ease-out); }
[dir="rtl"] .doc .view { transform: translateX(6px); }
.doc .view svg { width: 13px; height: 13px; }
[dir="rtl"] .doc .view svg { scale: -1 1; }
.doc:hover .view, .doc:focus-visible .view { opacity: 1; transform: none; }
.doc mark { background: rgba(143,193,255,.45); color: inherit; border-radius: 3px; padding: 0 1px; }
.doc.leave { opacity: 0; transform: scale(.94); transition: opacity 220ms var(--ease-in), transform 260ms var(--ease-in); }
.doc.enter { opacity: 0; transform: translateY(14px); }
.doc.enter-go { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: var(--ed, 0ms); }
.doc.found::after { content: ""; position: absolute; inset: -6px; border-radius: 26px; border: 2px solid var(--blue); animation: found 2400ms var(--ease-out) forwards; pointer-events: none; }
@keyframes found { 0% { opacity: 0; transform: scale(1.06); } 15% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; } }
.empty { text-align: center; padding: 80px 0 40px; color: var(--ink-2); }
.empty p { font-size: 20px; margin: 0 0 18px; }

/* ── 4 · Browse by specialty: each team's size drawn as a bar ── */
.sbc { background: #fff; padding-block: clamp(96px, 11vw, 140px); }
.h2.light { font-weight: 300; }
.sbc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: 18px; }
.sbc-top { position: relative; border-radius: var(--r-card); background: var(--navy); color: #fff; padding: 30px; display: flex; flex-direction: column; min-height: 360px; text-align: start; border: 0; overflow: hidden; isolation: isolate; transition: transform 150ms var(--ease-out); }
.sbc-top::before { content: ""; position: absolute; inset: 0; background: url("assets/footer-pattern.webp") right bottom / 520px auto no-repeat; opacity: .55; z-index: -1; }
.sbc-top:active { transform: scale(.985); }
.sbc-top .badge { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
[dir="rtl"] .sbc-top .badge { letter-spacing: 0; font-size: 12.5px; }
.sbc-top .big { margin-top: auto; font-size: clamp(72px, 9vw, 120px); line-height: .9; font-weight: 300; }
.sbc-top h3 { margin: 10px 0 0; font-size: 28px; }
.sbc-top .go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.sbc-top .go svg { width: 14px; height: 14px; transition: transform 300ms var(--ease-out); }
[dir="rtl"] .sbc-top .go svg { scale: -1 1; }
.sbc-top:hover .go svg { transform: translateX(4px); }
[dir="rtl"] .sbc-top:hover .go svg { transform: translateX(-4px); }
.sbc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: start; }
.sbc-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 18px 0 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: start; color: var(--navy); }
.sbc-row b { font-size: 18px; }
.sbc-row .n { font-size: 30px; font-weight: 300; font-variant-numeric: tabular-nums; }
.sbc-row .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.sbc-row .bar i { display: block; height: 100%; width: 100%; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1200ms var(--ease-out); transition-delay: calc(200ms + var(--k) * 90ms); }
[dir="rtl"] .sbc-row .bar i { transform-origin: 100% 50%; }
.sbc-grid.in .sbc-row .bar i { transform: scaleX(var(--v)); }
.sbc-row .lbl { grid-column: 1 / -1; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: color 250ms; }
.sbc-row .lbl svg { width: 12px; height: 12px; opacity: 0; transform: translateX(-4px); transition: opacity 250ms, transform 300ms var(--ease-out); }
[dir="rtl"] .sbc-row .lbl svg { scale: -1 1; }
.sbc-row:hover .lbl { color: var(--navy); }
.sbc-row:hover .lbl svg { opacity: 1; transform: none; }
.sbc-row:hover .bar i { background: var(--blue); }
.sbc-others { margin-top: 36px; }
.sbc-others h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
[dir="rtl"] .sbc-others h4 { letter-spacing: 0; font-size: 13px; }
.sbc-others .wrapc { display: flex; flex-wrap: wrap; gap: 6px; }
.sbc-others button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; color: var(--navy); transition: border-color 250ms, transform 150ms var(--ease-out); }
.sbc-others button:hover { border-color: var(--navy); }
.sbc-others button:active { transform: scale(.96); }
.sbc-others button small { color: var(--muted); margin-inline-start: 6px; }
.flyer { position: fixed; z-index: 70; pointer-events: none; padding: 7px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; white-space: nowrap; }

/* ── 5 · Not sure who to see ── */
.notsure { padding-block: clamp(96px, 11vw, 140px); background: var(--cream); }
.ns-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.notsure .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.ns-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 8px 0 14px; }
[dir="rtl"] .ns-label { letter-spacing: 0; font-size: 13px; }
.situations { border-top: 1px solid var(--line); }
.sit { position: relative; isolation: isolate; display: grid; grid-template-columns: 48px 1fr 32px; gap: 16px; align-items: center; padding: 20px 14px; border-bottom: 1px solid var(--line); color: var(--navy); }
.sit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease-out); }
[dir="rtl"] .sit::before { transform-origin: 100% 50%; }
.sit:hover::before, .sit:focus-visible::before { transform: scaleX(1); }
.sit .si { width: 48px; height: 48px; border-radius: 14px; background: var(--navy); color: #fff; display: grid; place-items: center; transition: transform 400ms var(--ease-out); }
.sit .si svg { width: 22px; height: 22px; overflow: visible; }
.sit .si svg * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sit:hover .si { transform: translateY(-2px) scale(1.06); }
.sit b { display: block; font-size: 18px; line-height: 1.3; transition: transform 300ms var(--ease-out); }
.sit small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.sit:hover b { transform: translateX(6px); }
[dir="rtl"] .sit:hover b { transform: translateX(-6px); }
.sit .arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background 250ms, color 250ms, border-color 250ms, transform 300ms var(--ease-out); }
.sit .arrow svg { width: 14px; height: 14px; transform: rotate(-45deg); transition: transform 300ms var(--ease-out); }
[dir="rtl"] .sit .arrow svg { transform: rotate(-135deg); }
.sit:hover .arrow { background: var(--navy); color: #fff; border-color: var(--navy); }
.sit:hover .arrow svg { transform: none; }
[dir="rtl"] .sit:hover .arrow svg { transform: scaleX(-1); }
/* each icon performs: the stethoscope swings, the shield checks, the pulse runs, the pair leans in */
.sit:hover .perf-swing { animation: swing 700ms var(--ease-out); transform-box: view-box; transform-origin: 30% 10%; }
.perf-draw { stroke-dasharray: 40; stroke-dashoffset: 0; }
.sit:hover .perf-draw { animation: redraw 800ms var(--ease-out); }
@keyframes redraw { from { stroke-dashoffset: 40; } }
.sit:hover .perf-lean { animation: lean 700ms var(--ease-out); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes lean { 40% { transform: rotate(-8deg); } 100% { transform: none; } }

/* ── Phones ── */
@media (max-width: 1080px) {
  .dcover-grid, .sbc-grid, .ns-grid { grid-template-columns: 1fr; }
  .dcover-grid { min-height: 0; }
  .dcopy { padding-block: 24px 8px; }
  .wall { height: 440px; }
  .wall-pause { bottom: 16px; inset-inline-end: calc(var(--gutter) + 14px); }
  .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sbc-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .wall { height: 340px; }
  .wall-cols { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 8px; }
  .wall-col { gap: 8px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div + div { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .dgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .doc .body { padding: 12px; }
  .doc h4 { font-size: 15.5px; }
  .doc .role { font-size: 12.5px; }
  .doc .foot { font-size: 12px; }
  .doc .view { display: none; }
  .fbar .search { flex-basis: 100%; }
  .count { margin-inline-start: 0; }
  .az button { width: 28px; height: 28px; font-size: 13px; }
  .az .az-pill { width: 28px; height: 28px; }
  body:not(.nav-hidden) .fbar-wrap { top: 76px; }
  .sit { grid-template-columns: 42px 1fr 28px; padding: 16px 6px; }
  .sit .si { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .dcover:not(.ready) .wall { clip-path: none; }
  .doc.leave, .doc.enter { opacity: 1; transform: none; }
}

/* Phones: More filters rises as a bottom sheet instead of a pop-over */
@media (max-width: 680px) {
  .pop { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; inset-inline-start: 12px; width: auto; border-radius: 22px; padding: 20px; transform: translateY(24px); transform-origin: 50% 100%; z-index: 60; }
  .more-wrap.open .pop { transform: none; }
  .sel .menu-list { max-width: calc(100vw - 32px); }
}

/* ── Consultant profile: a sheet from the reading end; the card's photo travels into it ── */
.profile { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; }
.profile-open .profile { visibility: visible; pointer-events: auto; }
.pf-backdrop { position: absolute; inset: 0; background: rgba(7,26,51,.46); opacity: 0; transition: opacity 500ms var(--ease-out); will-change: opacity; }
.profile-open .pf-backdrop { opacity: 1; }
.pf-sheet { position: absolute; top: 10px; bottom: 10px; inset-inline-end: 10px; width: min(720px, calc(100vw - 20px)); background: #fff; border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; outline: none;
  transform: translateX(calc(100% + 24px)); transition: transform 640ms var(--ease-surface); }
[dir="rtl"] .pf-sheet { transform: translateX(calc(-100% - 24px)); }
.profile-open .pf-sheet { transform: none; }
.profile.closing .pf-sheet { transition-duration: 460ms; }
main, .util, .nav, footer { transition: transform 640ms var(--ease-surface), filter 640ms var(--ease-surface); }
.pf-handle { display: none; }
.pf-bar { position: absolute; top: 14px; inset-inline: 14px; z-index: 5; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.pf-bar > * { pointer-events: auto; }
.pf-nav { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; padding: 4px; font-size: 13px; color: var(--navy); font-variant-numeric: tabular-nums; }
.pf-nav span { padding-inline: 6px; min-width: 64px; text-align: center; }
.pf-nav button, .pf-close { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--navy); display: grid; place-items: center; transition: background 200ms, transform 150ms var(--ease-out); }
.pf-nav button:hover { background: var(--tint); }
.pf-nav button:active, .pf-close:active { transform: scale(.9); }
.pf-nav svg, .pf-close svg { width: 15px; height: 15px; }
[dir="rtl"] .pf-nav svg { scale: -1 1; }
.pf-close { background: var(--navy); color: #fff; width: 44px; height: 44px; transition: background 200ms, transform 300ms var(--ease-out); }
.pf-close:hover { transform: rotate(90deg); }
.pf-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.pf-top { display: grid; grid-template-columns: 260px 1fr; gap: 26px; padding: 76px 34px 26px; align-items: end; background: linear-gradient(var(--tint), #fff); }
.pf-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--tint); }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }
.pf-photo .mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; font-weight: 300; color: var(--navy); }
.pf-photo.waiting img, .pf-photo.waiting .mono { opacity: 0; }
.pf-id .spec { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
[dir="rtl"] .pf-id .spec { letter-spacing: 0; font-size: 13px; }
.pf-id h2 { margin: 10px 0 8px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.02em; color: var(--navy); }
[dir="rtl"] .pf-id h2 { letter-spacing: 0; line-height: 1.25; }
.pf-id .role { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.pf-id .chairb { display: inline-block; margin-top: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
[dir="rtl"] .pf-id .chairb { letter-spacing: 0; font-size: 12.5px; }
.pf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); margin: 0 34px; }
.pf-facts > div { padding: 18px 16px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.pf-facts > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.pf-facts .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
[dir="rtl"] .pf-facts .k { letter-spacing: 0; font-size: 12.5px; }
.pf-facts .v { font-size: 26px; font-weight: 300; color: var(--navy); line-height: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-facts .v small { font-size: 13px; font-weight: 500; }
.pf-facts .pill { font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); }
.pf-body { padding: 8px 34px 40px; }
.pf-sec { padding-top: 28px; }
.pf-sec h3 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.pf-sec h3::after { content: ""; flex: 1; height: 1px; background: var(--line); transform-origin: 0 50%; transform: scaleX(0); transition: transform 900ms var(--ease-out) 200ms; }
[dir="rtl"] .pf-sec h3 { letter-spacing: 0; font-size: 13px; }
[dir="rtl"] .pf-sec h3::after { transform-origin: 100% 50%; }
.pf-sec.in h3::after { transform: scaleX(1); }
.pf-sec p { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.pf-sec .more { border: 0; background: none; color: var(--navy); font-weight: 700; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.pf-sec .more svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform 300ms var(--ease-out); }
.pf-sec .more[aria-expanded="true"] svg { transform: rotate(-90deg); }
.pf-sec .bio { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease-out); }
.pf-sec .bio > div { overflow: hidden; }
.pf-sec .bio.open { grid-template-rows: 1fr; }
.pf-sec .chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-sec .chips2 span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--navy); }
.pf-sec ul.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-sec ul.list li { position: relative; padding-inline-start: 20px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pf-sec ul.list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 8px; height: 1px; background: var(--blue); }
.pf-sec blockquote { margin: 0; font-size: 20px; line-height: 1.45; color: var(--navy); font-weight: 500; }
.pf-cta { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,.92); }
.pf-cta .btn { flex: 1; justify-content: space-between; }
/* content enters in reading order; swapping consultants slides it out and in */
.pf-anim { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--k, 0) * 60ms + 200ms); }
.pf-shown .pf-anim { opacity: 1; transform: none; }
.pf-swap-out .pf-anim { opacity: 0; transform: translateY(-8px); transition: opacity 180ms var(--ease-in), transform 200ms var(--ease-in); transition-delay: 0ms; }
.pf-fly { position: fixed; z-index: 95; border-radius: 20px; overflow: hidden; background: var(--tint); pointer-events: none; }
.pf-fly img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }
.pf-fly .mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 60px; font-weight: 300; color: var(--navy); }

@media (max-width: 680px) {
  .profile .pf-sheet { top: auto; bottom: 0; inset-inline: 0; width: 100%; height: calc(100svh - 36px); border-radius: 26px 26px 0 0; transform: translateY(100%); }
  .profile-open .profile .pf-sheet { transform: translateY(var(--drag, 0px)); }
  .pf-handle { display: block; position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--line); z-index: 6; }
  .pf-top { grid-template-columns: 120px 1fr; gap: 16px; padding: 70px 18px 18px; }
  .pf-facts { margin: 0 18px; grid-template-columns: 1fr 1fr; }
  .pf-facts > div:nth-child(3) { grid-column: 1 / -1; border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); }
  .pf-body { padding: 4px 18px 32px; }
  .pf-id h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-anim { opacity: 1; transform: none; }
}

/* ═══ v3 · max motion on the Doctors page ═══ */
/* the wall: a light follows the pointer, and the faces deal in once the page is ready */
.wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 500ms var(--ease-out);
  background: radial-gradient(300px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.28), rgba(255,255,255,0) 60%); mix-blend-mode: soft-light; }
.wall:hover::after { opacity: 1; }
.js .dcover:not(.ready) .wfac { opacity: 0; transform: scale(.86); }
.dcover.ready .wfac { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 400ms var(--ease-out); transition-delay: calc(500ms + var(--wi, 0) * 70ms); }
.dcover.ready .wfac:hover { transition-delay: 0ms; }
/* roster cards deal in a row at a time, tipping up from the table */
.doc.deal { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(10deg); }
.doc.deal.dealt { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--col, 0) * 80ms); }
.doc.deal.dealt.tilting { transition: transform 120ms linear; }
/* the big letters draw as an outline, then fill */
.ghead h3 { -webkit-text-stroke: 1px var(--navy); transition: color 700ms var(--ease-out) 250ms, transform 800ms var(--ease-out); }
.js .ghead:not(.dealt) h3 { color: transparent; transform: translateX(-12px); }
[dir="rtl"].js .ghead:not(.dealt) h3 { transform: translateX(12px); }
.sbc-top { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .doc.deal, .js .dcover:not(.ready) .wfac { opacity: 1; transform: none; }
  .js .ghead:not(.dealt) h3 { color: var(--navy); transform: none; }
}

/* The name lives inside its own face, so it travels with it and is never clipped */
.wall-tip { display: none; }
.wfac .wcap { position: absolute; inset-inline: 6px; bottom: 6px; z-index: 2; padding: 9px 11px 8px; border-radius: 12px; background: rgba(11,36,67,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; text-align: start; line-height: 1.25; opacity: 0; transform: translateY(10px); transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); pointer-events: none; }
.wfac .wcap b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfac .wcap small { display: block; font-size: 11.5px; opacity: .78; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfac:hover .wcap, .wfac:focus-visible .wcap { opacity: 1; transform: none; }
@media (max-width: 680px) { .wfac .wcap { display: none; } }
.wall-fade { transition: opacity 500ms var(--ease-out); }
.wall.has-hover .wall-fade { opacity: 0; }

/* Closing: the words drop away first (shorter than they arrived), then the sheet leaves */
.profile.closing .pf-anim, .profile.closing .pf-cta, .profile.closing .pf-bar { opacity: 0; transform: translateY(10px); transition: opacity 200ms cubic-bezier(.7,0,.84,0), transform 240ms cubic-bezier(.7,0,.84,0); transition-delay: 0ms; }
.profile.closing .pf-backdrop { transition: opacity 460ms cubic-bezier(.65,0,.35,1) 80ms; }
.pf-cta, .pf-bar { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }

/* Scrolling inside a profile: the header drifts back as you read, and a compact bar keeps the consultant in view */
.pf-top .pf-photo { transform: translateY(calc(var(--pfp, 0) * 48px)) scale(calc(1 - var(--pfp, 0) * .14)); opacity: calc(1 - var(--pfp, 0) * .85); transform-origin: 50% 0; }
.pf-top .pf-id { transform: translateY(calc(var(--pfp, 0) * 30px)); opacity: calc(1 - var(--pfp, 0) * 1.1); }
.pf-bar::before { content: ""; position: absolute; inset: -14px -14px auto; height: 72px; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(-8px); transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out); }
.pf-sheet.compact .pf-bar::before { opacity: 1; transform: none; }
.pf-bar { gap: 12px; }
.pf-mini { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); pointer-events: none; }
.pf-sheet.compact .pf-mini { opacity: 1; transform: none; pointer-events: auto; }
.pf-mini .av { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--tint); flex: none; transform: scale(.6); transition: transform 500ms var(--ease-out); }
.pf-sheet.compact .pf-mini .av { transform: none; }
.pf-mini .av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }
.pf-mini .av .mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--navy); }
.pf-mini .tx { min-width: 0; line-height: 1.2; }
.pf-mini b { display: block; font-size: 15px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mini small { display: block; font-size: 12px; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-nav { flex: none; }
.pf-close { flex: none; }
@media (max-width: 680px) {
  .pf-sheet.compact .pf-nav span { display: none; }
  .pf-mini .tx small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-top .pf-photo, .pf-top .pf-id { transform: none; }
}

/* ═══ Closing, as one designed sequence ═══ */
/* the layer stays visible for the whole close (it used to vanish on the first frame) */
.profile.closing { visibility: visible; pointer-events: none; }
.pf-sheet { clip-path: inset(0 0 0 0 round 26px); }
/* 1 · the content falls away bottom-up, quickly, with a little blur */
.profile.closing .pf-anim { opacity: 0; transform: translateY(12px);
  transition: opacity 220ms cubic-bezier(.7,0,.84,0), transform 260ms cubic-bezier(.7,0,.84,0);
  transition-delay: calc(max(0, 9 - var(--k, 0)) * 18ms); }
.profile.closing .pf-cta, .profile.closing .pf-bar { opacity: 0; transform: translateY(8px); transition: opacity 200ms cubic-bezier(.7,0,.84,0), transform 240ms cubic-bezier(.7,0,.84,0); }
.profile.closing .pf-top { background: transparent; transition: background 300ms; }
/* 2 · the sheet folds toward its outer edge while it drifts away */
.profile.closing .pf-sheet { clip-path: inset(0 0 0 100% round 26px); transform: translateX(80px);
  transition: clip-path 600ms cubic-bezier(.65,0,.35,1) 140ms, transform 640ms cubic-bezier(.65,0,.35,1) 140ms; }
[dir="rtl"] .profile.closing .pf-sheet { clip-path: inset(0 100% 0 0 round 26px); transform: translateX(-80px); }
/* 3 · the backdrop clears underneath */
.profile.closing .pf-backdrop { opacity: 0; transition: opacity 560ms cubic-bezier(.65,0,.35,1) 160ms; }
/* the landing beat: the card's rim light follows the sweep with no lag */
.rim.sweeping::before { transition: none; }
@media (max-width: 680px) {
  .profile.closing .profile .pf-sheet, .profile.closing .pf-sheet { clip-path: inset(100% 0 0 0 round 26px); transform: translateY(60px); }
}
@media (prefers-reduced-motion: reduce) {
  .profile.closing .pf-sheet { clip-path: none; transform: none; opacity: 0; transition: opacity 200ms; }
}
/* the card a photo is flying home to holds perfectly still */
.doc.calm, .doc.calm.tilting { transform: none !important; }
.doc.calm .ph img, .wfac.calm img { transform: none !important; transition: none !important; }
.doc.calm::after { opacity: 0 !important; }
/* while a profile is open, the consultant's own card is marked in the roster behind it */
.doc.pf-current { box-shadow: 0 0 0 2px var(--sky), 0 0 0 7px rgba(143,193,255,.28); transition: box-shadow 400ms var(--ease-out); }

/* the flying photo gets its own layer */
.pf-fly { will-change: left, top, width, height; contain: layout paint; }
.pf-sheet { will-change: transform, clip-path; }

/* ═══ v4 · one step further ═══ */
/* Hovering a card slides the consultant's sub-specialties up over the photo */
.doc .subs-pop { position: absolute; inset-inline: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; z-index: 2; }
.doc .subs-pop span { padding: 5px 10px; border-radius: 999px; background: rgba(11,36,67,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 12px; line-height: 1.2;
  opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-out); transition-delay: 0ms; }
.doc:hover .subs-pop span, .doc:focus-visible .subs-pop span { opacity: 1; transform: none; transition-delay: calc(90ms + var(--j) * 45ms); }
.doc.calm .subs-pop span { opacity: 0 !important; }
@media (hover: none) { .doc .subs-pop { display: none; } }
/* Inside a profile, chips and list items cascade in as their section scrolls into view */
.pf-sec .chips2 span, .pf-sec ul.list li { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(150ms + var(--j, 0) * 40ms); }
.pf-sec.in .chips2 span, .pf-sec.in ul.list li { opacity: 1; transform: none; }
.pf-sec .chips2 span { transition-property: opacity, transform, border-color, background; }
.pf-sec .chips2 span:hover { border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .pf-sec .chips2 span, .pf-sec ul.list li { opacity: 1; transform: none; }
}
/* Share a profile: the icon folds into a tick */
.pf-share { width: 52px; flex: none !important; height: 52px; 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); }
.pf-share:hover { border-color: var(--navy); }
.pf-share:active { transform: scale(.92); }
.pf-share .ic2 { position: relative; width: 18px; height: 18px; }
.pf-share .ic2 svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: opacity 200ms, transform 320ms var(--ease-out); }
.pf-share .ic2 svg + svg { opacity: 0; transform: scale(.5) rotate(-20deg); color: var(--blue); }
.pf-share.done .ic2 svg:first-child { opacity: 0; transform: translateY(-6px) scale(.6); }
.pf-share.done .ic2 svg + svg { opacity: 1; transform: none; }
/* The roster opts in to cross-document view transitions with consultant pages */
@view-transition { navigation: auto; }
::view-transition-group(doc-photo), ::view-transition-group(doc-name), ::view-transition-group(doc-spec) { animation-duration: 760ms; animation-timing-function: cubic-bezier(.65,0,.35,1); }
.pf-full { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; color: var(--navy); font-size: 14.5px; }
.pf-full svg { width: 26px; height: 26px; padding: 7px; border-radius: 50%; background: var(--navy); color: #fff; transition: transform 300ms var(--ease-out); }
[dir="rtl"] .pf-full svg { scale: -1 1; }
.pf-full:hover svg { transform: translateX(3px); }
[dir="rtl"] .pf-full:hover svg { transform: translateX(-3px); }

/* ═══ v5 · finder, views, the wall that answers ═══ */
/* Guided finder */
.finder { margin: 6px 0 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.fi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.fi-head > b { font-size: 17px; color: var(--navy); }
.fi-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; counter-reset: s; }
.fi-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; color: var(--ink-2); transition: background 300ms, color 300ms; }
[dir="rtl"] .fi-steps li { padding: 6px 6px 6px 12px; }
.fi-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid var(--line); transition: background 300ms, color 300ms, border-color 300ms, transform 400ms var(--ease-out); }
.fi-steps li.cur { background: var(--tint); color: var(--navy); font-weight: 700; }
.fi-steps li.cur span { background: var(--navy); color: #fff; border-color: var(--navy); transform: scale(1.08); }
.fi-steps li.done span { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.fi-panes { display: grid; grid-template-columns: repeat(3, 100%); transform: translateX(calc(var(--s) * -100%)); transition: transform 640ms var(--ease-surface); }
[dir="rtl"] .fi-panes { transform: translateX(calc(var(--s) * 100%)); }
.fi-pane { padding: 18px 22px 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.fi-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 14.5px; color: var(--navy); transition: border-color 250ms, background 250ms, color 250ms, transform 150ms var(--ease-out); }
.fi-chip:hover { border-color: var(--navy); }
.fi-chip:active { transform: scale(.95); }
.fi-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.fi-pref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.fi-pref > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); min-width: 90px; }
[dir="rtl"] .fi-pref > span { letter-spacing: 0; font-size: 13px; }
.fi-next { margin-top: 6px; }
.fi-result { gap: 16px; }
.fi-faces { display: flex; }
.fi-faces span { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: var(--tint); margin-inline-start: -12px; animation: faceIn 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.fi-faces span:first-child { margin-inline-start: 0; }
.fi-faces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }
@keyframes faceIn { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.fi-result p { margin: 0; font-size: 16px; color: var(--ink-2); }
.fi-result p b { font-size: 26px; color: var(--navy); margin-inline-end: 4px; }
.fi-again { border: 0; background: none; color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Grid / By centre */
.viewsw { position: relative; display: flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; height: 50px; }
.viewsw button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--navy); transition: color 300ms; }
.viewsw button svg { width: 15px; height: 15px; }
.viewsw button[aria-pressed="true"] { color: #fff; }
.viewsw .knob { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--navy); transition: transform 420ms var(--ease-out), width 420ms var(--ease-out); }
.cgroup .ghead h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; -webkit-text-stroke: 0; color: var(--navy); }
.cgroup .ghead { transition: opacity 300ms; }

/* The wall answers the roster */
.wall .wfac { transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out), filter 600ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.wall.filtering .wfac:not(.match) { opacity: .26; filter: grayscale(1); }
.wall.filtering .wfac.match { box-shadow: 0 0 0 3px var(--blue); }

@media (max-width: 1080px) { .viewsw button span { display: none; } }
@media (max-width: 680px) {
  .fi-steps li { font-size: 0; padding: 4px; }
  .fi-steps li span { font-size: 12px; }
  .fi-pane { padding: 14px 16px 18px; }
  .viewsw { height: 44px; }
}

/* ═══ Compare, booking hand-over ═══ */
.pin { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color: var(--navy); display: grid; place-items: center;
  opacity: 0; transform: scale(.7); transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), background 250ms, color 250ms; }
.pin svg { width: 15px; height: 15px; transition: transform 380ms var(--ease-out); }
.doc:hover .pin, .doc:focus-within .pin, .pin.on, .pf-share.pin, .dp-actions .pin { opacity: 1; transform: none; }
.pin.on { background: var(--navy); color: #fff; }
.pin.on svg { transform: rotate(45deg); }
.pin:active { transform: scale(.88); }
.pf-share.pin { position: static; }
.pf-share.pin.on, .dp-actions .pin.on { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (hover: none) { .doc .pin { opacity: 1; transform: none; } }

.cmp-tray { position: fixed; z-index: 70; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border: 1px solid var(--line);
  transform: translate(-50%, 150%); transition: transform 560ms var(--ease-surface); }
.cmp-tray.on { transform: translate(-50%, 0); }
.cmp-faces { display: flex; gap: 6px; }
.cf { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); }
.cf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; border-radius: 50%; mix-blend-mode: multiply; }
.cf i { display: grid; place-items: center; height: 100%; font-style: normal; color: var(--navy); }
.cf.cf-empty { border: 1.5px dashed var(--line); background: transparent; }
.cf.cf-new { animation: cfPop 600ms var(--ease-out) 760ms both; }
.cmp-faces { align-items: center; }
.cf { flex: none; }
@keyframes cfPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
.cf button { position: absolute; top: -4px; inset-inline-end: -4px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-size: 12px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity 200ms; }
.cf:hover button, .cf button:focus-visible { opacity: 1; }
.cmp-go:disabled { opacity: .45; cursor: default; }
.cmp-clear { border: 0; background: none; color: var(--navy); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cmp-tray.full { animation: nudge 500ms var(--ease-out); }
@keyframes nudge { 30% { transform: translate(calc(-50% - 6px), 0); } 60% { transform: translate(calc(-50% + 4px), 0); } 100% { transform: translate(-50%, 0); } }
.cmp-fly { position: fixed; z-index: 75; overflow: hidden; background: var(--tint); pointer-events: none; }
.cmp-fly img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }
.cmp-fly i { display: grid; place-items: center; height: 100%; font-style: normal; color: var(--navy); }
.cmp { position: fixed; inset: 0; z-index: 95; visibility: hidden; pointer-events: none; }
.cmp-open .cmp { visibility: visible; pointer-events: auto; }
.cmp-back { position: absolute; inset: 0; background: rgba(7,26,51,.5); opacity: 0; transition: opacity 400ms var(--ease-out); }
.cmp-open .cmp-back { opacity: 1; }
.cmp-panel { position: absolute; inset: 24px max(16px, calc((100vw - 1100px) / 2)); background: #fff; border-radius: 28px; overflow: auto; padding: 28px 28px 36px;
  clip-path: circle(0 at var(--ox) var(--oy)); transition: clip-path 760ms var(--ease-surface); }
.cmp-open .cmp-panel { clip-path: circle(150vmax at var(--ox) var(--oy)); }
.cmp-x { position: sticky; top: 0; float: inline-end; z-index: 2; }
.cmp-grid { display: grid; gap: 0; clear: both; }
.cmp-row { display: grid; grid-template-columns: 170px repeat(var(--cols), minmax(0, 1fr)); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.cmp-row.head { border-bottom: 1px solid var(--line); padding-top: 0; }
.cmp-k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-top: 4px; }
[dir="rtl"] .cmp-k { letter-spacing: 0; font-size: 12.5px; }
.cmp-v { display: flex; flex-wrap: wrap; gap: 6px; color: var(--navy); font-size: 15px; }
.cmp-v .big { font-size: 40px; font-weight: 300; line-height: 1; }
.cmp-v .pill { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; }
.cmp-row.head .cmp-v { flex-direction: column; gap: 4px; opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(350ms + var(--i) * 90ms); }
.cmp-open .cmp-row.head .cmp-v { opacity: 1; transform: none; }
.cmp-ph { width: 100%; max-width: 200px; aspect-ratio: 4 / 4.4; border-radius: 18px; overflow: hidden; background: var(--tint); margin-bottom: 10px; }
.cmp-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; }
.cmp-ph i { display: grid; place-items: center; height: 100%; font-style: normal; font-size: 40px; color: var(--navy); }
.cmp-row.head b { font-size: 19px; line-height: 1.2; }
.cmp-row.head small { font-size: 13px; color: var(--blue); }
@media (max-width: 680px) { .cmp-row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } .cmp-k { grid-column: 1 / -1; } .cmp-panel { inset: 10px; padding: 18px; } .cmp-tray { bottom: 76px; } }

.book-card { position: fixed; z-index: 130; background: var(--navy); color: #fff; overflow: hidden; display: grid; place-items: center; }
.book-card .bk-in { text-align: center; padding: 28px; opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.book-card.shown .bk-in { opacity: 1; transform: none; }
.bk-ph { display: block; width: 104px; height: 104px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; background: #e8ebf0; border: 3px solid rgba(255,255,255,.3); }
.bk-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.bk-k { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); font-weight: 800; }
[dir="rtl"] .bk-k { letter-spacing: 0; font-size: 14px; }
.book-card b { display: block; font-size: 26px; margin-top: 8px; }
.book-card small { display: block; font-size: 14px; color: rgba(255,255,255,.75); margin-top: 4px; }
.bk-go { display: block; margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.7); }
.bk-bar { display: block; width: 200px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.bk-bar i { display: block; height: 100%; background: var(--sky); transform: scaleX(0); transform-origin: 0 50%; }
.book-card.shown .bk-bar i { transform: scaleX(1); transition: transform 1400ms var(--ease-in-out); }
html.booking::after { content: ""; position: fixed; inset: 0; z-index: 129; background: rgba(7,26,51,.4); animation: dim 500ms var(--ease-out) both; }
@keyframes dim { from { opacity: 0; } }

/* Phones: the filter bar keeps to two rows: search, then specialty · filters · sort · view */
@media (max-width: 680px) {
  .fbar { gap: 8px; }
  .fbar .search { order: 0; }
  .sel > button, .fbtn, .viewsw { height: 44px; }
  #selSpec { flex: 1 1 0; min-width: 0; order: 1; }
  #selSpec > button { width: 100%; justify-content: space-between; padding-inline: 16px 12px; }
  #selSpec > button span { overflow: hidden; text-overflow: ellipsis; }
  .more-wrap { order: 2; }
  .fbtn { padding-inline: 0; width: 44px; justify-content: center; position: relative; }
  .fbtn > span { display: none; }
  .fbtn .badge-n { position: absolute; top: -3px; inset-inline-end: -3px; }
  .sel.sort { order: 3; }
  .sel.sort > button { width: 44px; padding: 0; justify-content: center; }
  .sel.sort > button small, .sel.sort > button span { display: none; }
  .sel.sort > button svg { width: 16px; height: 16px; }
  .viewsw { order: 4; }
  .viewsw button { padding: 0 11px; }
  .count { order: 5; flex-basis: 100%; font-size: 13px; }
  .count b { font-size: 18px; }
  .fbar-wrap.stuck .count { display: none; }
}
.viewsw button:focus:not(:focus-visible), .fbtn:focus:not(:focus-visible), .sel > button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.sort-ic { display: none; }
@media (max-width: 680px) { .sel.sort .sort-ic { display: block; } .sel.sort > button svg.chev { display: none; } }

/* ═══ Meet the consultant ═══ */
.vid-badge { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 6px; border-radius: 999px; background: rgba(7,26,51,.78); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.vid-badge svg { width: 12px; height: 12px; fill: currentColor; }
.meet { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 7px 16px 7px 7px; border: 0; border-radius: 999px; text-align: start;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); color: var(--navy); cursor: pointer;
  transition: transform 420ms var(--ease-out), background 300ms; }
.meet:hover { transform: translateY(-3px); background: #fff; }
.meet:active { transform: scale(.97); }
.meet-play { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.meet-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
[dir="rtl"] .meet-ring { transform: rotate(-90deg) scaleY(-1); }
.meet-ring circle { fill: var(--navy); stroke: rgba(143,193,255,.35); stroke-width: 3; }
.meet-ring .p { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 131.9; transition: stroke-dashoffset 300ms linear; }
.meet-tri { position: relative; width: 18px; height: 18px; fill: #fff; margin-inline-start: 2px; transition: transform 400ms var(--ease-out); }
[dir="rtl"] .meet-tri { transform: scaleX(-1); }
.meet:hover .meet-tri { transform: scale(1.15); }
[dir="rtl"] .meet:hover .meet-tri { transform: scaleX(-1) scale(1.15); }
.meet-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sky); opacity: 0; animation: meetPulse 2.6s var(--ease-out) 1.2s infinite; }
@keyframes meetPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.meet-tx { min-width: 0; line-height: 1.2; }
.meet-tx b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meet-tx small { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pf-photo .meet { left: 10px; right: 10px; bottom: 10px; padding-inline-end: 12px; }
.pf-photo .meet-play { width: 40px; height: 40px; }
.pf-photo .meet-tx b { font-size: 13.5px; }
.compact .pf-photo .meet { opacity: 0; pointer-events: none; }
.meet-src { visibility: hidden; }
.meet-src > * { visibility: hidden; }

.meet-ov { position: fixed; inset: 0; z-index: 140; visibility: hidden; pointer-events: none; }
.meet-open .meet-ov { visibility: visible; pointer-events: auto; }
.meet-back { position: absolute; inset: 0; background: rgba(4,14,30,.9); opacity: 0; transition: opacity 500ms var(--ease-out); }
.meet-open .meet-back { opacity: 1; }
.meet-closing .meet-back { opacity: 0; transition-duration: 600ms; }
.meet-stage { position: fixed; overflow: hidden; background: #000; }
.meet-stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.meet-stage.landed video { object-fit: contain; }
.meet-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--navy); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity 300ms, transform 400ms var(--ease-out); }
.meet-x svg { width: 16px; height: 16px; }
.meet-stage.landed .meet-x { opacity: 1; transform: none; transition-delay: 100ms; }
.meet-cap { position: fixed; left: 0; right: 0; bottom: 28px; text-align: center; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity 400ms, transform 500ms var(--ease-out); pointer-events: none; }
.meet-cap b { display: block; font-size: 18px; } .meet-cap small { color: rgba(255,255,255,.65); font-size: 13.5px; }
.meet-stage.landed .meet-cap { opacity: 1; transform: none; transition-delay: 160ms; }
html.meet-open .mbar, html.meet-open .cmp-tray { transform: translate(-50%, 160%); }
@media (max-width: 680px) { .meet-tx b { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .meet-play::after { animation: none; } }
html.rm .meet-play::after { animation: none; }

/* The brand face sits high in its line box: trim it to the cap height so labels and numbers centre exactly in pills and circles */
.fi-steps li, .fi-steps li span, .fi-chip, .viewsw button span, .sel > button span, .sel > button small, .fbtn > span, .cmp-clear, .fi-again, .vid-badge, .meet-tx small { line-height: 1; }
@supports (text-box: trim-both cap alphabetic) {
  .fi-steps li span, .fi-chip, .fi-steps li, .vid-badge { text-box: trim-both cap alphabetic; }
}
.fi-chip { padding: 12px 18px; }
.fi-steps li { padding-block: 6px; }
.fi-pane { align-content: flex-start; }

/* fixes from the verification round */
.pf-share.pin { position: static; width: 52px; height: 52px; border: 1px solid var(--line); background: #fff; opacity: 1; transform: none; }
@media (max-width: 680px) {
  .pf-cta { gap: 8px; padding: 12px 16px; }
  .pf-cta .btn.plain { flex: none; width: 52px; padding: 0; justify-content: center; }
  .pf-cta .btn.plain span { display: none; }
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cmp-tray:not(.on) { transform: translate(-50%, calc(100% + 96px)); }
  /* on the drawer's small portrait the Meet pill becomes the play ring alone */
  .pf-photo .meet { left: auto; right: 8px; bottom: 8px; padding: 4px; }
  [dir="rtl"] .pf-photo .meet { right: auto; left: 8px; }
  .pf-photo .meet .meet-tx { display: none; }
}
.pf-cta .bk-s { display: none; }
@media (max-width: 420px) { .pf-cta .bk-l { display: none; } .pf-cta .bk-s { display: inline; } .pf-cta .btn.primary { flex: 1 1 auto; justify-content: space-between; } }
.dcover { background: linear-gradient(#fff 0, #fff 48%, var(--cream) 100%); }
/* A blurred ancestor becomes the containing block for fixed children: while the filters sheet is open, the bar drops its blur
   so the sheet anchors to the screen (bottom), not to the bar */
body:has(.more-wrap.open) .fbar-wrap, body:has(.more-wrap.open) .fbar-wrap.stuck { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; background: var(--cream); }
/* tray: slots are fixed 44px circles whatever else sits in the row */
.cmp-faces { height: 44px; align-items: center; }
.cmp-faces .cf { width: 44px; height: 44px; flex: none; align-self: center; }
/* filters popover: labels stay on one line */
@media (min-width: 681px) { .pop { width: auto; min-width: 380px; } }
.pop .seg button { white-space: nowrap; flex: 1 1 auto; padding: 9px 12px; }
.cmp-tray .cmp-faces > .cf, .cmp-tray .cmp-faces > .cf.cf-empty { width: 44px !important; height: 44px !important; min-height: 0; }
.cmp-tray .cmp-faces > .cf { display: block; }

/* Compare pin on roster cards: always visible, a generous target, and it says what it does */
.doc .pin { top: 12px; inset-inline-end: 12px; width: auto; min-width: 40px; height: 40px; padding: 0 12px; gap: 0; display: inline-flex; align-items: center; justify-content: center;
  opacity: 1; transform: none; background: rgba(255,255,255,.94); color: var(--navy); box-shadow: 0 6px 18px -8px rgba(7,26,51,.45);
  transition: background 250ms, color 250ms, gap 360ms var(--ease-out), padding 360ms var(--ease-out), box-shadow 250ms; }
.doc .pin::before { content: ""; position: absolute; inset: -8px; border-radius: 999px; }
.doc .pin::after { content: attr(aria-label); max-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 700; transition: max-width 420ms var(--ease-out); }
.doc .pin svg { width: 16px; height: 16px; flex: none; }
.doc .pin:hover, .doc .pin:focus-visible { gap: 8px; padding: 0 14px 0 12px; box-shadow: 0 10px 24px -8px rgba(7,26,51,.55); }
.doc .pin:hover::after, .doc .pin:focus-visible::after { max-width: 160px; }
.doc .pin.on { background: var(--navy); color: #fff; }
.doc .pin:active { transform: none; background: var(--tint); }
@media (hover: none) { .doc .pin::after { display: none; } }
/* off-screen roster cards skip rendering until they near the viewport */

#results .doc, #results .doc img { -webkit-user-drag: none; user-select: none; }
/* the compare pin stays a true pill as its label widens it; the ring is for keyboard focus only */
.doc .pin { border-radius: 999px; }
.doc .pin:focus { outline: none; }
.doc .pin:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* the card's 3D tilt depth-sorts the photo in front of the pin for real presses: lift the pin forward in 3D */
.doc .pin, .doc .vid-badge, .doc .chair { translate: 0 0 60px; }
.doc .ph { transform-style: preserve-3d; }