/* ============================================================
   Medical Advisory Board — layered on landing.css (the house system).
   Adds nothing to the palette; every colour below is a house token.

   Interaction contract:
     no JS          → each profile is a native <details>, expands in place
     JS + <dialog>  → board.js moves the same panel into a drawer
   Both paths render the identical markup, so there is one copy of every bio.
   ============================================================ */

/* ---------- Utilities the house sheet doesn't carry yet ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--sky-deep); color: var(--white);
  font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 0 0 12px 12px;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--sky-deep); outline-offset: 3px; border-radius: 6px;
}

/* ---------- Page head ---------- */
.ab-hero {
  padding-top: clamp(110px, 12vh, 152px);
  padding-bottom: clamp(36px, 4.5vw, 64px);
}
/* Below 1080px this is a single column and the paragraphs simply stack. Above
   it, the supporting copy moves alongside the title — same words, roughly half
   the scroll, and the empty right-hand half of a large monitor does some work. */
.ab-hero-grid { display: grid; gap: clamp(18px, 2.6vw, 52px); }
.ab-hero-main, .ab-hero-aside { min-width: 0; }
@media (min-width: 1080px) {
  .ab-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
  }
  .ab-hero-aside { padding-top: clamp(8px, 1.4vw, 20px); }
  .ab-lede { margin-bottom: 0; }
}
.ab-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.04;
  letter-spacing: -0.022em; color: var(--ink); margin: 0 0 26px;
  text-shadow: 0 2px 30px rgba(255,255,255,0.85), 0 1px 4px rgba(255,255,255,0.6);
}
.ab-lede {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.22rem, 2.1vw, 1.62rem); line-height: 1.42;
  letter-spacing: -0.008em; color: var(--ink); margin: 0 0 22px;
  text-shadow: 0 1px 16px rgba(255,255,255,0.95);
}
.ab-sub {
  font-size: clamp(0.98rem, 1.25vw, 1.06rem); line-height: 1.68;
  color: var(--ink-2); margin: 0 0 16px; max-width: 66ch;
  text-shadow: 0 1px 14px rgba(255,255,255,0.9);
}
.ab-sub:last-child { margin-bottom: 0; }

/* ---------- The board ---------- */
.ab-board {
  background: rgba(255,255,255,0.26);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding-top: clamp(40px, 6vw, 72px);
}
/* The line that explains why some cards are veiled. Centred and held to a
   reading measure above the grid — a visitor should meet the explanation before
   they meet the first blurred portrait, not after. */
.ab-board-note {
  max-width: 74ch; margin: 0 auto clamp(28px, 3.4vw, 44px);
  text-align: center;
  font-size: clamp(0.95rem, 1.2vw, 1.02rem); line-height: 1.66;
  color: var(--ink-2);
  text-shadow: 0 1px 14px rgba(255,255,255,0.9);
}

/* The private-preview variant of that note (server/board.js §PREVIEW). It is
   addressed to one named person rather than to a visitor, so it is given a
   card of its own — a page that quietly behaves differently should say so
   loudly, not leave the reader to notice. */
.ab-board-note--preview {
  max-width: 62ch; text-align: left;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--sky-line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px);
  text-shadow: none;
}
/* The house eyebrow — a short rule then small caps — is what marks a section
   here, so the preview is flagged the same way rather than with a stripe down
   the side of the panel. */
.ab-preview-flag {
  display: flex; align-items: center; gap: 10px; margin-bottom: 11px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sky-deep);
}
.ab-preview-flag::before {
  content: ""; width: 22px; height: 1px; flex: none;
  background: var(--sky-deep); opacity: 0.55;
}

/* Flex, not grid: the board grows and shrinks, and a wrapped final row of
   one or two advisors should sit centred rather than stranded left. */
.ab-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 2vw, 24px);
}
/* Five across on a wide screen. A board page exists so the bench can be seen
   as a group — at three across, nine advisors ran to three tall rows and you
   never saw more than a few at once. Narrower cards plus a clamped summary and
   four tags instead of seven bring the whole board to two even rows of five.
   Below ~1330px it wraps to four, then three, then two, then one. */
.ab-card {
  flex: 1 1 232px; max-width: 256px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 14px 44px -30px rgba(13,44,73,0.42);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.ab-card:hover, .ab-card:focus-within {
  transform: translateY(-4px); border-color: var(--sky-line);
  box-shadow: 0 28px 58px -32px rgba(13,44,73,0.5);
}

/* ---------- Portrait ---------- */
/* One aspect ratio for everyone, whatever the source photography. */
.ab-portrait {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(165deg, var(--mist) 0%, var(--paper) 62%, var(--white) 100%);
  border-bottom: 1px solid var(--sky-line);
}
.ab-photo {
  width: 100%; height: 100%; object-fit: cover;
  /* One tonal treatment for everyone. The board's photography arrives from
     wherever each advisor's career produced it — a clinic studio, a team
     portrait, a garden — and monochrome is what makes five unrelated
     backgrounds read as one set. It is a treatment, not a retouch: nobody's
     face is altered, and removing this one line restores every original. */
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: transform .7s var(--ease-out);
}
.ab-card:hover .ab-photo { transform: scale(1.028); }
/* A whisper of the house blue in the shadows, so the portraits sit inside the
   palette instead of reading as stark black and white. */
.ab-portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(143,198,240,0.16) 0%, rgba(31,114,189,0.10) 55%, rgba(13,44,73,0.20) 100%);
}

/* An advisor whose photo has not arrived, on a board that otherwise has them.
   The frame keeps the card's shape; the mark sits quietly inside it and the
   tint is dropped so it never looks like a photo that failed to load. */
.ab-portrait--pending {
  background: linear-gradient(168deg, var(--mist) 0%, var(--paper) 58%, var(--white) 100%);
}
.ab-portrait--pending::after { background: none; }
.ab-monogram {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.5rem, 4.6vw, 3.2rem); letter-spacing: 0.07em;
  color: rgba(31,114,189,0.3);
}

/* When the board has no photography at all: a small typographic mark above the
   name, and no portrait frame anywhere. */
.ab-avatar {
  display: grid; place-items: center; width: 58px; height: 58px;
  margin-bottom: 20px; border-radius: 50%;
  background: linear-gradient(160deg, var(--mist) 0%, var(--paper) 100%);
  border: 1px solid var(--sky-line);
  font-family: var(--font-display); font-weight: 500; font-size: 1.16rem;
  letter-spacing: 0.05em; color: var(--sky-deep);
  box-shadow: 0 0 0 5px rgba(143,198,240,0.14);
}

/* ---------- Card body ---------- */
.ab-head { padding: 26px clamp(22px, 2.2vw, 28px) 0; }
.ab-card--mark .ab-head { padding-top: 30px; }
.ab-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.34rem; line-height: 1.16; letter-spacing: -0.014em;
  color: var(--ink); margin: 0;
}
/* Credentials stay legible but never compete with the name. */
.ab-creds {
  display: block; margin-top: 7px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ab-role {
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--sky-line);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.012em; line-height: 1.42;
  color: var(--sky-deep);
}
.ab-short {
  margin: 15px 0 0; padding-inline: clamp(22px, 2.2vw, 28px);
  font-size: 0.945rem; line-height: 1.62; color: var(--ink-soft);
  /* Clamped so one advisor's longer summary cannot set the height of the whole
     row. The full bio is a click away in the profile panel, and the text is
     still complete in the markup for search engines and screen readers. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}

/* ---------- Expertise tags ---------- */
.ab-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 18px 0 0; padding-inline: clamp(22px, 2.2vw, 28px);
}
.ab-tags li {
  font-size: 0.715rem; font-weight: 500; letter-spacing: 0.035em;
  color: var(--ink-soft); background: rgba(232,242,251,0.72);
  border: 1px solid var(--sky-line); border-radius: 999px;
  padding: 5px 11px; line-height: 1.3;
}

/* ---------- View profile ---------- */
.ab-more { margin-top: auto; }
.ab-open {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  margin-top: 22px; padding: 17px clamp(22px, 2.2vw, 28px);
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem; font-weight: 600; color: var(--sky-deep);
  list-style: none; min-height: 52px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ab-open::-webkit-details-marker { display: none; }
.ab-open:hover { background: rgba(232,242,251,0.5); }
.ab-open-mark {
  width: 15px; height: 15px; flex: none; position: relative; margin-left: auto;
  transition: transform .35s var(--ease);
}
.ab-open-mark::before, .ab-open-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: 2px; transform: translate(-50%, -50%);
}
/* No JS: the control expands the card in place, so it reads as a +/− toggle. */
.ab-open-mark::before { width: 13px; height: 1.5px; }
.ab-open-mark::after  { width: 1.5px; height: 13px; transition: opacity .3s var(--ease), transform .35s var(--ease); }
.ab-more[open] .ab-open-mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
/* With JS the control opens a drawer, so the same mark becomes an arrow. */
html.js .ab-open-mark::before { width: 12px; height: 1.5px; }
html.js .ab-open-mark::after {
  width: 7px; height: 7px; background: none; border-radius: 1px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: translate(-50%, -50%) translateX(2.6px) rotate(45deg);
  transition: none;
}
html.js .ab-open:hover .ab-open-mark { transform: translateX(3px); }

/* ---------- The profile panel (inline fallback styling) ---------- */
.ab-panel { padding: 4px clamp(22px, 2.2vw, 28px) 28px; }
.ab-panel-head { margin-bottom: 18px; }
.ab-panel-role {
  margin: 0 0 8px; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.03em; color: var(--sky-deep);
}
.ab-panel-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12;
  letter-spacing: -0.018em; color: var(--ink); margin: 0;
}
.ab-panel-name .ab-creds { margin-top: 10px; font-size: 0.8rem; }
.ab-panel-bio p {
  font-size: 1rem; line-height: 1.72; color: var(--ink-2);
  margin: 0 0 17px; max-width: 62ch;
}
.ab-panel-bio p:last-child { margin-bottom: 0; }
.ab-panel-bio em { font-style: italic; color: var(--ink); }
.ab-panel-tags {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hairline);
}
.ab-panel-tags-label {
  margin: 0 0 12px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.ab-panel-tags .ab-tags { margin: 0; padding-inline: 0; }
.ab-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.ab-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 0.9rem; font-weight: 600; color: var(--sky-deep);
  border-bottom: 1px solid var(--sky-line); transition: border-color .25s var(--ease);
}
.ab-link:hover { border-bottom-color: var(--sky-deep); }
.ab-link-ex { font-size: 0.85em; }

/* ---------- The drawer ---------- */
.ab-dialog {
  /* Desktop: a right-hand drawer. Mobile rules below turn it into a sheet. */
  margin: 0 0 0 auto; padding: 0; border: 0;
  width: min(560px, 100%); max-width: 100%;
  height: 100dvh; max-height: 100dvh;
  background: var(--white); color: var(--ink-2);
  box-shadow: -30px 0 80px -40px rgba(13,44,73,0.55);
  overflow: hidden;
}
.ab-dialog::backdrop {
  background: rgba(13,44,73,0.44);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ab-dialog-inner {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(58px, 6vw, 72px) clamp(24px, 4vw, 46px) clamp(40px, 6vw, 64px);
}
.ab-dialog .ab-panel { padding: 0; }
.ab-dialog .ab-panel-head {
  margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
}
.ab-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: rgba(255,255,255,0.9); color: var(--ink-soft); cursor: pointer;
  font-family: inherit; transition: all .25s var(--ease);
}
.ab-close:hover { color: var(--sky-deep); border-color: var(--sky); background: var(--paper); }
.ab-close svg { width: 17px; height: 17px; }

/* Entrance / exit. Progressive: browsers without @starting-style just appear. */
@media (prefers-reduced-motion: no-preference) {
  .ab-dialog {
    transition: translate .42s var(--ease-out), opacity .3s var(--ease),
                overlay .42s allow-discrete, display .42s allow-discrete;
    translate: 0 0; opacity: 1;
  }
  .ab-dialog:not([open]) { translate: 4% 0; opacity: 0; }
  @starting-style { .ab-dialog[open] { translate: 4% 0; opacity: 0; } }
  .ab-dialog::backdrop {
    transition: opacity .42s var(--ease), overlay .42s allow-discrete, display .42s allow-discrete;
    opacity: 1;
  }
  .ab-dialog:not([open])::backdrop { opacity: 0; }
  @starting-style { .ab-dialog[open]::backdrop { opacity: 0; } }
}
body.ab-locked { overflow: hidden; }

/* ---------- Multidisciplinary perspective ---------- */
.ab-persp-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.28;
  letter-spacing: -0.014em; color: var(--on-navy);
  margin: 14px 0 30px; max-width: 26ch; position: relative; z-index: 1;
}
.ab-persp-body { position: relative; z-index: 1; max-width: 64ch; }
.ab-persp-body p {
  font-size: clamp(0.99rem, 1.3vw, 1.08rem); line-height: 1.76;
  color: var(--on-navy-dim); margin: 0 0 18px;
}
.ab-persp-body p:last-child { margin-bottom: 0; }

/* ---------- Disclosure ---------- */
.ab-disclosure {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding-block: clamp(38px, 5vw, 60px);
}
.ab-disclosure-note {
  margin: 0; padding-top: 22px; border-top: 1px solid var(--hairline);
  font-size: 0.83rem; line-height: 1.75; color: var(--ink-soft); max-width: 78ch;
}

/* ---------- Landing-page teaser ---------- */
.ab-teaser { background: rgba(232,242,251,0.24); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ab-teaser-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.ab-teaser-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ab-teaser-names li {
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(255,255,255,0.72);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.ab-teaser-names li:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.ab-teaser-names li:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.ab-teaser-names li:hover { transform: translateX(4px); border-color: var(--sky-line); }
.ab-teaser-names a {
  display: block; padding: 17px 22px; min-height: 52px;
  font-size: clamp(0.96rem, 1.3vw, 1.06rem); color: var(--ink);
}
.ab-teaser-names a:hover { color: var(--sky-deep); }
.ab-teaser-actions { margin-top: 28px; }

/* ---------- Reveal stagger ---------- */
html.js .ab-grid .ab-card:nth-child(2) { transition-delay: 80ms; }
html.js .ab-grid .ab-card:nth-child(3) { transition-delay: 160ms; }
html.js .ab-grid .ab-card:nth-child(4) { transition-delay: 60ms; }
html.js .ab-grid .ab-card:nth-child(5) { transition-delay: 140ms; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ab-teaser-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* One column, full width — no half-width cards squeezed onto a phone. */
  .ab-card { flex: 1 1 100%; max-width: 100%; }
  .ab-grid { gap: 26px; }
  .ab-portrait { aspect-ratio: 5 / 4; }        /* a wider crop reads better in a full-width card */

  /* The drawer becomes a bottom sheet. */
  .ab-dialog {
    margin: auto 0 0; width: 100%;
    height: auto; max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 70px -30px rgba(13,44,73,0.6);
  }
  .ab-dialog-inner { padding: 60px 24px 44px; max-height: 88dvh; }
  @media (prefers-reduced-motion: no-preference) {
    .ab-dialog { translate: 0 0; }
    .ab-dialog:not([open]) { translate: 0 6%; }
    @starting-style { .ab-dialog[open] { translate: 0 6%; } }
  }
  /* A grab handle so the sheet reads as a sheet. */
  .ab-dialog::before {
    content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 4px; background: var(--sky-line); z-index: 2;
  }
  .ab-close { top: 20px; right: 12px; }
}
@media (max-width: 400px) {
  .ab-tags li { font-size: 0.7rem; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-card, .ab-photo, .ab-open-mark, .ab-teaser-names li { transition: none; }
  .ab-card:hover { transform: none; }
  .ab-card:hover .ab-photo { transform: none; }
}

/* ── Five across, and the seat held open ─────────────────────
   The board grid gets a wider measure than the prose bands around it: five
   256px cards plus their gaps need ~1376px, where the page's reading measure
   is 1200. Prose stays narrow because prose should; a group portrait should
   not. */
.ab-board .wrap { max-width: 1400px; }

/* The tenth card is a seat, not a person. It keeps the exact shape of a real
   card so the two rows align, and gives up everything that would make it read
   as an advisor: no photo, no credentials, no profile, no hover lift. A dashed
   frame and a lighter surface say "not filled yet" without a word of copy. */
.ab-card--seat {
  background: rgba(255,255,255,0.42);
  border: 1px dashed var(--sky-line);
  box-shadow: none;
}
.ab-card--seat:hover { transform: none; box-shadow: none; border-color: var(--sky-line); }
.ab-portrait--seat {
  display: grid; place-items: center;
  background: linear-gradient(165deg, rgba(232,242,251,0.5) 0%, rgba(245,249,253,0.5) 100%);
  border-bottom: 1px dashed var(--sky-line);
}
/* A plus, drawn rather than typed, so it reads as a slot rather than a letter. */
.ab-seat-mark { position: relative; width: 34px; height: 34px; opacity: 0.5; }
.ab-seat-mark::before, .ab-seat-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--sky-deep); border-radius: 2px;
  transform: translate(-50%, -50%);
}
.ab-seat-mark::before { width: 30px; height: 2px; }
.ab-seat-mark::after  { width: 2px; height: 30px; }
.ab-seat-eyebrow {
  margin: 0 0 8px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sky-deep);
}
.ab-card--seat .ab-name { color: var(--ink-soft); font-weight: 500; }
.ab-seat-note { -webkit-line-clamp: 5; padding-bottom: 26px; }
/* The seat on its own private preview: a solid frame in the house accent, the
   one card on that page that is addressed to the reader. */
.ab-card--seat-yours { border: 1.5px solid var(--sky-deep); background: rgba(255,255,255,0.88); }
.ab-card--seat-yours .ab-portrait--seat { border-bottom-style: solid; border-bottom-color: var(--sky-deep); }
.ab-card--seat-yours .ab-seat-mark { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .ab-card--seat { transition: none; }
}

/* ── Seats in confirmation ───────────────────────────────────
   Between a named advisor and an empty slot sits a third state: a real person
   the board is talking to, whose name is not ours to publish yet. The card
   keeps the full shape of a real one — the row must not break where the board
   is still forming — and gives up everything that would name them.

   The visual job is to read as WITHHELD rather than as BROKEN. A face softened
   to nothing behind glass says "not yet"; the same face at 40% opacity says
   "the image failed to load". So the portrait keeps its full contrast and the
   card keeps its full surface, and the only signals that this card is different
   are the eyebrow, the lighter title, and the closing line where a real card
   carries "View profile".

   Nothing here does the hiding. The file behind .ab-photo--veiled was already
   destroyed to a 16×20 thumbnail before it was blurred back up, and the server
   refuses to serve the original at all — the small blur below is a smoothing
   pass over JPEG artefacts, not the privacy mechanism. Deleting every rule in
   this block reveals a blurred silhouette and nothing more. */
.ab-card--veiled {
  background: rgba(255,255,255,0.78);
}
/* No lift. A card with nothing to open should not promise that it opens. */
.ab-card--veiled:hover, .ab-card--veiled:focus-within {
  transform: none;
  box-shadow: 0 14px 44px -30px rgba(13,44,73,0.42);
  border-color: var(--sky-line);
}
.ab-portrait--veiled { background: linear-gradient(165deg, var(--mist) 0%, var(--paper) 62%, var(--white) 100%); }
/* The veil files are ALREADY greyscale and already levelled into one tonal band
   at generation time — a clinic backdrop and a garden would otherwise sit side
   by side as near-white and near-black, which reads as two broken images rather
   than as one set. grayscale(1) is kept anyway, and deliberately: it costs
   nothing, and it means a veil generated without the levelling step still lands
   in the set instead of arriving in full colour next to five monochrome
   neighbours. The blur is a smoothing pass over the upscale, never the privacy
   mechanism — that lives in the bytes and in the media guard. */
.ab-photo--veiled {
  filter: grayscale(1) blur(3px);
  transform: scale(1.06);            /* hides the soft edge the blur leaves */
  /* Veiled cards carry no `focal` — there is no face left to frame — but the
     phone breakpoint crops the same 4:5 file to 5:4, so the crop still has to
     be biased upward or the silhouette loses its head. */
  object-position: 50% 30%;
}
.ab-card--veiled:hover .ab-photo--veiled { transform: scale(1.06); }
/* A pane of glass over the portrait: a fine vertical sheen and a soft top
   light, so the softness reads as something placed in front of the photograph
   rather than as a photograph that went wrong. */
.ab-portrait--veiled::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(178deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 46%),
    repeating-linear-gradient(96deg, rgba(255,255,255,0.055) 0 2px, rgba(255,255,255,0) 2px 7px);
}
.ab-veil-eyebrow {
  margin: 0 0 9px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sky-deep);
}
/* The specialty stands where a name would. It is a phrase, not a name, so it
   is set a size down and a weight lighter — a visitor should never read it as
   somebody being called "Orthopedic Surgery". */
.ab-veil-name {
  font-size: 1.12rem; font-weight: 500; line-height: 1.28;
  letter-spacing: -0.004em; color: var(--ink-soft);
}
/* Sits where "View profile" sits on a real card, so the two rows keep one
   baseline — and says plainly what the veil is waiting on. */
/* margin-top:auto here, not on the tags: the note is what should be pinned to
   the foot of the card so it lines up with "View profile" on its neighbours,
   while the tags stay tucked under the copy they belong to. */
.ab-veil-note {
  margin: auto 0 0; padding: 17px clamp(22px, 2.2vw, 28px);
  border-top: 1px solid var(--hairline);
  font-size: 0.78rem; line-height: 1.5; color: var(--ink-soft);
  min-height: 52px; display: flex; align-items: center;
}

/* The landing-page name list ends with a count, not a name. It is a link to
   the board and nothing else, set quieter than the advisors above it. */
.ab-teaser-more a { color: var(--ink-soft); font-weight: 500; }
.ab-teaser-more a::after { content: " →"; color: var(--sky-deep); }

@media (prefers-reduced-motion: reduce) {
  .ab-card--veiled, .ab-photo--veiled { transition: none; }
}