/* © TechNext Pte. Ltd. (technext.asia). All rights reserved. */
/* Team cards (22 Oct 2026, owner: "spotlight + quick view"): one lit glass portrait card for the home team section and the
   Team Directory, plus the quick view panel. Brief: .impeccable/surfaces/src-pages-employee-hub-html.md. Sits on home-fx.css
   (glass tokens, .pf-stats, .pf-skills chips). Behaviour: assets/js/team-cards.js sets --mx/--my (light) and --rx/--ry
   (tilt) on .tm-face. Light theme only; reduced motion: no tilt, no ring turn, the panel fades. */

/* ---------------------------------------------------------------- grid */
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tm-card { position: relative; display: flex; min-width: 0; perspective: 1200px; }
.tm-card[hidden] { display: none; }

/* ---------------------------------------------------------------- the lit glass portrait */
.tm-face { --mx: 50%; --my: 20%; --rx: 0deg; --ry: 0deg; --lit: 0;
  position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0; padding: 32px 24px 24px; border-radius: 24px; cursor: pointer;
  background: var(--fx-glass); border: 1px solid var(--fx-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--fx-depth), inset 0 1px 0 #fff;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--fx-ease), box-shadow .45s var(--fx-ease), border-color .45s var(--fx-ease); }
.tm-face.is-live { transition: transform .14s linear, box-shadow .45s var(--fx-ease), border-color .45s var(--fx-ease); }
.tm-card:hover .tm-face, .tm-face:focus-within { --lit: 1; border-color: rgba(111,160,245,.6);
  box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff; }

/* the light: a soft spotlight under the cursor and a bright rim where it meets the edge */
.tm-light { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--lit);
  transition: opacity .45s var(--fx-ease);
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(111,160,245,.28), rgba(111,160,245,.08) 45%, transparent 72%); }
.tm-light::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(49,103,202,.95), rgba(49,103,202,0) 70%);
  -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0); }

/* the portrait and its ring */
.tm-ava { position: relative; flex: none; width: 150px; height: 150px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #fff, var(--blue-050) 55%, #DCE7FA);
  box-shadow: 0 18px 34px -22px rgba(30,70,145,.6);
  transition: box-shadow .5s var(--fx-ease); }
.tm-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tm-ini { font: 800 48px/1 var(--font-display); letter-spacing: -.03em; color: var(--blue-700); }
.tm-ring { position: absolute; inset: -7px; border-radius: 50%; padding: 3px; pointer-events: none; opacity: .45;
  background: conic-gradient(from 0deg, var(--blue), rgba(111,160,245,.12) 30%, var(--blue-300) 55%, rgba(111,160,245,.12) 80%, var(--blue));
  -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0);
  transition: opacity .45s var(--fx-ease), filter .45s var(--fx-ease); }
.tm-card:hover .tm-ring, .tm-face:focus-within .tm-ring { opacity: 1; filter: drop-shadow(0 0 8px rgba(111,160,245,.85)); animation: tmTurn 5s linear infinite; }
.tm-card:hover .tm-ava, .tm-face:focus-within .tm-ava { box-shadow: 0 0 0 10px rgba(111,160,245,.12), 0 26px 46px -18px rgba(30,70,145,.6); }
@keyframes tmTurn { to { transform: rotate(1turn); } }

/* who */
.tm-name { margin: 0; font: 800 1.3rem/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ink); }   /* no transform: the link's ::after must cover the whole card */
.tm-name a { color: inherit; text-decoration: none; }
.tm-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the whole card is the target */
.tm-name a:focus-visible { outline: none; }
.tm-face:has(.tm-name a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 4px; }
.tm-role { margin: 5px 0 0; font: 650 15px/1.35 var(--font-body); color: var(--blue-700); }
.tm-office { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14px; line-height: 1.3; color: var(--body); }
.tm-office .ic { width: 15px; height: 15px; color: var(--blue); }

/* home: one line and the numbers */
.tm-sum { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.tm-face .tm-stats { width: 100%; margin: 18px 0 0; text-align: left; }

/* directory: email, top skills, actions */
.tm-mail { position: relative; z-index: 2; margin: 10px 0 0; }
.tm-mail .th-mail { font: 650 15px/1.3 var(--font-body); color: var(--blue); overflow-wrap: anywhere; text-decoration: none; }
.tm-mail .th-mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.tm-skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.tm-skills li { padding: 5px 10px; border-radius: 999px; background: var(--blue-050); font: 600 12.5px/1.25 var(--font-body); color: var(--blue-700); }
.tm-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin: 18px 0 0; }
.tm-actions:empty { display: none; }

/* the way in: a quick-view pill and the profile link (above the card's stretched link) */
.tm-qv-hint { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(111,160,245,.55); background: rgba(255,255,255,.9); cursor: pointer;
  font: 700 12.5px/1 var(--font-body); color: var(--blue-700); opacity: 0; transform: translateY(-4px);
  transition: opacity .3s var(--fx-ease), transform .3s var(--fx-ease), background .2s var(--fx-ease); }
.tm-qv-hint .ic { width: 14px; height: 14px; }
.tm-card:hover .tm-qv-hint, .tm-face:focus-within .tm-qv-hint { opacity: 1; transform: none; }
.tm-qv-hint:hover { background: var(--blue-050); }
.tm-qv-hint:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tm-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px;
  font: 700 14px/1.2 var(--font-body); color: var(--blue-700); text-decoration: none; }
.tm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tm-link .ic { width: 16px; height: 16px; transition: transform .25s var(--fx-ease); }
.tm-link:hover .ic { transform: translateX(3px); }
.tm-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
@media (hover: none) { .tm-qv-hint { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- quick view */
html.tm-lock { overflow: hidden; }
.tm-qv { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; overflow: hidden; color: var(--ink); }
.tm-qv::backdrop { background: rgba(31,31,61,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tm-qv[open]::backdrop { animation: tmFade .4s var(--fx-ease); }
@keyframes tmFade { from { opacity: 0; } }
.tm-qv-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(500px, calc(100% - 24px)); display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.86); border: 1px solid var(--fx-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 40px 90px -36px rgba(30,70,145,.6), 0 2px 6px rgba(31,31,61,.06), inset 0 1px 0 #fff; }
.tm-qv-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #E3E9F5; }
.tm-qv-bar button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--blue-100); background: #fff;
  color: var(--ink); cursor: pointer; transition: border-color .2s var(--fx-ease), background .2s var(--fx-ease); }
.tm-qv-bar button:hover { border-color: var(--blue); background: var(--blue-050); }
.tm-qv-bar button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tm-qv-bar svg { width: 18px; height: 18px; }
.tm-qv-prev svg { transform: rotate(180deg); }
.tm-qv-count { flex: 1; font: 600 13.5px/1 var(--font-body); color: var(--body); font-variant-numeric: tabular-nums; }
.tm-qv-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 26px 28px 30px; scrollbar-width: thin; scrollbar-color: #C9D4EA transparent; }
.tm-qv-body:focus { outline: none; }
.tm-qv-head { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 20px; align-items: center; }
.tm-ava--qv { width: 116px; height: 116px; margin: 0; transform: none; }
.tm-ava--qv .tm-ring { opacity: 1; animation: tmTurn 6s linear infinite; }
.tm-ava--qv .tm-ini { font-size: 38px; }
.tm-qv-name { margin: 0; font: 800 1.65rem/1.12 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.tm-qv-bio { margin: 20px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--body); }
.tm-qv-stats { margin-top: 18px; }
.tm-qv-groups { margin-top: 6px; }
.tm-qv-g { margin-top: 18px; }
.tm-qv-g h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 9px; font: 800 15px/1.3 var(--font-display); color: var(--ink); }
.tm-qv-g h3 span { padding: 4px 8px; border-radius: 999px; background: var(--blue-050); font: 700 12px/1 var(--font-body); color: var(--blue-700); font-variant-numeric: tabular-nums; }
.tm-qv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 28px 20px; border-top: 1px solid #E3E9F5; background: #fff; }
.tm-qv-act { display: contents; }
.tm-qv-page { margin-left: auto; }
.tm-qv ::selection { background: var(--blue-100); color: var(--ink); }

.tm-grid.eh-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }   /* the directory's older grid rule loads later */
@media (max-width: 1080px) { .tm-grid, .tm-grid.eh-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tm-grid, .tm-grid.eh-people { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* home: one card and a peek of the next, swiped sideways */
  .tm-grid--home { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: -6px -16px -32px; padding: 10px 16px 48px; scrollbar-width: thin; }   /* room for the shadow and focus ring */
  .tm-grid--home .tm-card { flex: 0 0 86%; scroll-snap-align: center; }
  .tm-face { padding: 28px 18px 20px; }
  .tm-ava { width: 128px; height: 128px; }
  .tm-ini { font-size: 40px; }
  .tm-qv-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 90vh; border-radius: 24px 24px 0 0; }
  .tm-qv-body { padding: 22px 18px 24px; }
  .tm-qv-head { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .tm-ava--qv { width: 88px; height: 88px; }
  .tm-qv-name { font-size: 1.35rem; }
  .tm-qv-foot { padding: 14px 18px 18px; }
  .tm-qv-foot .btn, .tm-qv-foot .eh-act2 { flex: 1 1 100%; justify-content: center; }
  .tm-qv-page { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-face, .tm-face.is-live, .tm-ava, .tm-light, .tm-qv-hint, .tm-link .ic { transition: none; }
  .tm-card:hover .tm-ring, .tm-face:focus-within .tm-ring, .tm-ava--qv .tm-ring { animation: none; }
  .tm-qv[open]::backdrop { animation: none; }
}

/* ---------------------------------------------------------------- review fix batch (22 Oct 2026) */
/* the blue grid field the glass sits on (DESIGN.md Field Rule), faded at both ends into the neighbouring sections */
section.fx-sec.tm-field { position: relative; isolation: isolate; }
section.fx-sec.tm-field::before, main > section.fx-sec.tm-field::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--fx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px), linear-gradient(180deg, #F5F8FE, #FBFCFE);
  background-size: 56px 56px, 56px 56px, auto;
  -webkit-mask: linear-gradient(transparent, var(--ink) 18%, var(--ink) 82%, transparent); mask: linear-gradient(transparent, var(--ink) 18%, var(--ink) 82%, transparent); }
/* directory card actions: full-width and quiet, so the person leads; the filled Email lives in the quick view */
.tm-actions .eh-act2 { flex: 1 1 100%; justify-content: center; }
.tm-actions .eh-act2--main { background: var(--blue-050); color: var(--blue-700); border: 1px solid var(--blue-100); }
.tm-actions .eh-act2--main:hover { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-300); }
/* home: summaries hold three lines so the stats and links line up across a row */
@media (min-width: 601px) { .tm-grid--home .tm-sum { min-height: calc(2em * 1.55); } }
/* directory quick view footer: Email and Save contact share a row; the profile link centres under them */
.tm-qv-foot .eh-act2 .ic { width: 18px; height: 18px; }
@media (min-width: 601px) {
  .tm-qv-foot:has(.eh-act2) .eh-act2 { flex: 1 1 0; justify-content: center; }
  .tm-qv-foot:has(.eh-act2) .tm-qv-page { flex-basis: 100%; margin: 0; display: flex; justify-content: center; }
}
/* an incomplete last row sits centred (7 people on home, 8 cards in the directory) */
@media (min-width: 601px) {
  .tm-grid, .tm-grid.eh-people { display: flex; flex-wrap: wrap; justify-content: center; }
  .tm-grid .tm-card { flex: 0 1 calc((100% - 40px) / 3); }
}
@media (min-width: 601px) and (max-width: 1080px) { .tm-grid .tm-card { flex-basis: calc((100% - 20px) / 2); } }
/* phones (owner 22 Oct 2026: "proper viewing so we can showcase the team"): the whole home team at a glance, two portraits
   a row; a tap opens the quick view with the summary, numbers and every skill */
@media (max-width: 600px) {
  .tm-grid--home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .tm-grid--home .tm-card { flex: none; }
  .tm-grid--home .tm-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .tm-grid--home .tm-face { padding: 20px 10px 16px; border-radius: 20px; }
  .tm-grid--home .tm-ava { width: 108px; height: 108px; margin-bottom: 12px; }
  .tm-grid--home .tm-ini { font-size: 34px; }
  .tm-grid--home .tm-ring { inset: -5px; }
  .tm-grid--home .tm-name { font-size: 1rem; line-height: 1.2; }
  .tm-grid--home .tm-role { margin-top: 3px; font-size: 12.5px; line-height: 1.3; }
  .tm-grid--home .tm-office { margin-top: 5px; font-size: 12px; }
  .tm-grid--home .tm-office .ic { width: 13px; height: 13px; }
  .tm-grid--home .tm-sum, .tm-grid--home .tm-stats, .tm-grid--home .tm-link, .tm-grid--home .tm-qv-hint { display: none; }
  /* no "View profile" label on the home cards (owner 22 Oct 2026); the whole card opens the quick view */
}

/* home: four columns when four or more cards (owner 22 Oct 2026); a touch more compact */
@media (min-width: 1200px) {
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-card { flex-basis: calc((100% - 60px) / 4); }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-face { padding: 28px 18px 20px; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-ava { width: 128px; height: 128px; margin-bottom: 16px; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-ini { font-size: 40px; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-name { font-size: 1.18rem; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-role { font-size: 14px; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-sum { font-size: 14px; }
  /* narrow cards: the numbers stack as rows (number left, label beside it) so nothing collides */
  .tm-grid--home:has(> .tm-card:nth-child(4)) .pf-stats { grid-auto-flow: row; grid-auto-columns: auto; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .pf-stats > div { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 14px 10px 16px; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .pf-stats > div + div { box-shadow: inset 0 1px 0 var(--blue-100); }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .tm-card--lead .pf-stats > div + div { box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .pf-stats > div::before { top: 50%; left: 0; width: 3px; height: 18px; margin-top: -9px; border-radius: 0 3px 3px 0; transition: height .45s var(--fx-ease), margin-top .45s var(--fx-ease); }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .pf-stats > div:hover::before { width: 3px; height: 28px; margin-top: -14px; }
  .tm-grid--home:has(> .tm-card:nth-child(4)) .pf-stats dd { flex: none; width: 68px; font-size: 20px; }   /* one number column, so labels line up */
  .tm-grid--home:has(> .tm-card:nth-child(4)) .pf-stats dt { font-size: 12.5px; text-align: left; }
}

/* the highlighted card (Clement, CEO): TechNext blue, white type, white ring and a light stats strip */
.tm-card--lead .tm-face { background: linear-gradient(160deg, #3A72D6 0%, var(--blue) 45%, var(--blue-700) 100%); border-color: rgba(255,255,255,.28);
  box-shadow: 0 2px 6px rgba(30,70,145,.25), 0 34px 60px -28px rgba(30,70,145,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.tm-card--lead:hover .tm-face, .tm-card--lead .tm-face:focus-within { border-color: rgba(255,255,255,.55);
  box-shadow: 0 2px 6px rgba(30,70,145,.25), 0 40px 70px -26px rgba(30,70,145,.85), inset 0 1px 0 rgba(255,255,255,.4); }
.tm-card--lead .tm-light { background: radial-gradient(340px circle at var(--mx) var(--my), rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, transparent 72%); }
.tm-card--lead .tm-light::after { background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
.tm-card--lead .tm-ava { background: rgba(255,255,255,.18); box-shadow: 0 18px 34px -20px rgba(10,30,80,.8); }
.tm-card--lead .tm-ring { background: conic-gradient(from 0deg, #fff, rgba(255,255,255,.2) 30%, #DDE7F8 55%, rgba(255,255,255,.2) 80%, #fff); opacity: .7; }
.tm-card--lead:hover .tm-ring, .tm-card--lead .tm-face:focus-within .tm-ring { filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }
.tm-card--lead .tm-name, .tm-card--lead .tm-name a { color: #fff; }
.tm-card--lead .tm-role { color: #fff; }
.tm-card--lead .tm-office, .tm-card--lead .tm-office .ic { color: rgba(255,255,255,.92); }
.tm-card--lead .tm-sum { color: rgba(255,255,255,.92); }
.tm-card--lead .pf-stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.tm-card--lead .pf-stats > div + div { box-shadow: inset 1px 0 0 rgba(255,255,255,.22); }
.tm-card--lead .pf-stats > div::before { background: #fff; }
.tm-card--lead .pf-stats dd { color: #fff; }
.tm-card--lead .pf-stats dt { color: rgba(255,255,255,.88); }
.tm-card--lead .tm-link { color: #fff; }
.tm-card--lead .tm-link:focus-visible, .tm-card--lead .tm-qv-hint:focus-visible { outline-color: #fff; }
.tm-card--lead .tm-qv-hint { background: rgba(255,255,255,.95); }
.tm-face:has(.tm-name a:focus-visible) { outline-color: var(--blue-700); }
@media (max-width: 600px) { .tm-grid--home .tm-card--lead .tm-face::after { color: #fff; } }

/* BIR compliance row (owner 22 Oct 2026: "always highlight the skills with bir compliance"): green, a shield, up to three skills */
.tm-bir { width: 100%; margin: 14px 0 0; padding: 12px 12px 12px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, rgba(232,245,238,.95), rgba(232,245,238,.7)); border: 1px solid rgba(19,122,74,.22); }
.tm-bir-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 800 12.5px/1.2 var(--font-body); color: #0F5C38; letter-spacing: .01em; }
.tm-bir-h .ic { width: 15px; height: 15px; color: #137A4A; }
.tm-bir ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tm-bir li { padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(19,122,74,.2); font: 600 12px/1.3 var(--font-body); color: #0F5C38; }
.tm-card--lead .tm-bir { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.tm-card--lead .tm-bir-h, .tm-card--lead .tm-bir-h .ic { color: #fff; }
.tm-card--lead .tm-bir li { background: rgba(255,255,255,.92); color: #0F5C38; }
@media (max-width: 600px) { .tm-grid--home .tm-bir { display: none; } }   /* phones: the photo grid stays clean; the quick view leads with BIR */
.tm-qv-g:has(.pf-skills--bir) { padding: 14px 14px 12px; border-radius: 16px; background: rgba(232,245,238,.8); border: 1px solid rgba(19,122,74,.22); }   /* quick view BIR group */
.tm-qv-g:has(.pf-skills--bir) h3 { color: #0F5C38; }

/* home with three cards (the three BIR experts): three wide columns, the stats strip side by side */
@media (min-width: 1081px) { .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-card { flex-basis: calc((100% - 40px) / 3); max-width: 380px; } }
/* phones, three experts: full cards one per row, so the BIR panel and numbers stay visible */
@media (max-width: 600px) {
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-face { padding: 26px 18px 20px; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-ava { width: 128px; height: 128px; margin-bottom: 16px; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-name { font-size: 1.25rem; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-role { font-size: 14px; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-office { font-size: 13.5px; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-sum, .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-bir { display: block; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-stats { display: grid; }
  .tm-grid--home:not(:has(> .tm-card:nth-child(4))) .tm-qv-hint { display: inline-flex; }
}