/* ============================================================
   TDNT · TEAM PAGE (tm-)
   Loaded after styles.css by team.html. Brand colors only.
   Portraits are transparent cutouts: each person stands in front of a
   disc in their desk colour (Leadership Midnight, SMS Cobalt, Voice
   Ember) on a Sage panel, and lifts slightly out of the frame on hover.
   ============================================================ */

html.tm-lock { overflow: hidden; }

/* ── shared: portrait frame ── */
.tm-photo {
  --tone: var(--cobalt);
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  isolation: isolate;
  /* clip the sides and bottom only, so the cutout's head can rise above the frame */
  clip-path: inset(-16% 0 0 0 round 0 0 12px 12px);
}
.tm-photo.is-voice { --tone: var(--ember); }
.tm-photo.is-lead { --tone: var(--midnight); }
/* the panel behind the cutout: desk-colour disc behind the head, a faint dot field, Sage ground */
.tm-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tone) 15%, transparent) 0 32%, transparent 32.4%),
    radial-gradient(circle, color-mix(in srgb, var(--tone) 16%, transparent) 1px, transparent 1.5px) 0 0 / 10px 10px,
    color-mix(in srgb, var(--sage) 80%, var(--cloud));
}
/* the cutout grows from its base on hover */
.tm-photo img {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 30%;
  transform-origin: 50% 100%;
  transition: transform 0.7s cubic-bezier(.2, .7, .2, 1);
}
/* placeholder (photo: null): a head-and-shoulders silhouette drawn in the brand's dot matrix */
.tm-photo.is-ph::after {
  content: "";
  position: absolute;
  inset: 12% 6% 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--cobalt) 55%, transparent) 1.35px, transparent 1.7px);
  background-size: 8px 8px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Ccircle cx='50' cy='36' r='21'/%3E%3Cpath d='M6 112C8 82 27 66 50 66s42 16 44 46z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Ccircle cx='50' cy='36' r='21'/%3E%3Cpath d='M6 112C8 82 27 66 50 66s42 16 44 46z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  transition: transform 0.7s cubic-bezier(.2, .7, .2, 1);
}
.tm-ph-init {
  position: absolute;
  left: 8%;
  top: 7%;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cobalt);
}

/* desk chips */
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.tm-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tm-chip.is-sms { color: var(--cobalt); background: color-mix(in srgb, var(--cobalt) 7%, transparent); }
.tm-chip.is-voice { color: var(--ember); background: color-mix(in srgb, var(--ember) 7%, transparent); }
.tm-chip.is-lead { color: var(--midnight); background: color-mix(in srgb, var(--midnight) 6%, transparent); }
.tm-chip.is-leader { color: var(--cloud); background: var(--midnight); border-color: var(--midnight); }
.tm-chip.is-leader::before { background: var(--ember); }

/* contact rows with copy buttons */
.tm-rows { margin: 0; display: grid; }
.tm-rows > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.tm-rows > div:last-child { border-bottom: 1px solid var(--line); }
.tm-rows dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.tm-rows dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.tm-rows dd a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--fg); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.2s, color 0.2s; }
.tm-rows dd a:hover { color: var(--accent); text-decoration-color: currentColor; }
.tm-copy { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); color: var(--fg-dim); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.tm-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-faint); }

/* ── banner ── */
.tm-banner { overflow: hidden; }
.tm-banner-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.tm-banner .pg-h1 { max-width: 9ch; }
.tm-banner-stats { margin: clamp(28px, 4vw, 44px) 0 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; border-top: 1px solid var(--line); }
.tm-banner-stats div { padding: 14px 24px 0 0; }
.tm-banner-stats div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.tm-banner-stats dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.tm-banner-stats dd { margin: 6px 0 0; font-family: var(--display); font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -0.02em; white-space: nowrap; }

/* the fanned deck */
.tm-deck {
  --gap: clamp(46px, 5vw, 70px);
  --rot: 6deg;
  --drop: 14px;
  --px: 0;
  --py: 0;
  position: relative;
  height: clamp(380px, 38vw, 500px);
}
.tm-deck:hover, .tm-deck:focus-within { --gap: clamp(64px, 7vw, 100px); --rot: 8deg; }
.tm-deck-card {
  --lift: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(150px, 13.5vw, 206px);
  display: grid;
  padding: 8px 8px 0;
  border-radius: 16px;
  background: var(--cloud);
  color: var(--midnight);
  text-align: left;
  box-shadow: 0 30px 60px -24px rgba(10, 8, 28, 0.85), 0 0 0 1px rgba(255, 251, 250, 0.08);
  z-index: calc(10 - var(--a) * 2);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--o) * var(--gap) + var(--px) * 26px), calc(var(--a) * var(--drop) + var(--py) * 14px + var(--lift)), 0)
    rotate(calc(var(--o) * var(--rot) + var(--px) * 3deg));
  transition: transform 0.9s cubic-bezier(.2, .7, .2, 1), opacity 0.6s, box-shadow 0.4s;
  animation: tmDeal 0.9s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(0.25s + var(--a) * 0.12s);
}
/* cards waiting behind the fan for their turn */
.tm-deck-card.is-off { opacity: 0; pointer-events: none; z-index: 0; }
.tm-deck-card:hover, .tm-deck-card:focus-visible { --lift: -26px; z-index: 20; box-shadow: 0 40px 70px -24px rgba(10, 8, 28, 0.95), 0 0 0 2px var(--ember); outline: none; }
.tm-deck-card .tm-photo { border-radius: 10px; }
.tm-deck-card .tm-photo { clip-path: inset(-16% 0 0 0 round 0 0 10px 10px); }
.tm-deck-card:hover .tm-photo img, .tm-deck-card:focus-visible .tm-photo img { transform: scale(1.07); }
.tm-deck-name { display: grid; gap: 2px; padding: 10px 4px 12px; }
.tm-deck-name b { font-family: var(--display); font-weight: 400; font-size: 13.5px; letter-spacing: -0.01em; line-height: 1.25; }
.tm-deck-name span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--midnight) 55%, var(--cloud)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes tmDeal {
  /* individual translate/scale compose with the fan transform instead of replacing it */
  from { opacity: 0; translate: 0 60px; scale: 0.9; }
}

/* ── leadership ── */
.tm-leads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.tm-lead {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 2.4vw, 30px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg-card);
  transition: border-color 0.3s, box-shadow 0.4s;
}
.tm-lead.reveal { transition-delay: calc(var(--i, 0) * 90ms); }
.tm-lead:hover { border-color: var(--accent-line); box-shadow: 0 28px 60px -40px rgba(0, 51, 153, 0.55); }
.tm-lead:hover .tm-photo img { transform: scale(1.06); }
.tm-lead:hover .tm-photo.is-ph::after { transform: scale(1.035); }
.tm-lead .tm-photo { border-radius: 14px; align-self: start; }
.tm-lead-body { display: grid; align-content: center; gap: 0; padding: 10px 10px 10px 0; min-width: 0; }
.tm-lead-name { margin: 16px 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.tm-lead-role { margin: 0 0 20px; font-size: 15px; color: var(--fg-dim); }
.tm-lead-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tm-lead-acts .btn svg, .tm-d-acts .btn svg { flex: none; }

/* ── desks: filter bar ── */
.tm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.tm-filter { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); }
.tm-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px; color: var(--fg-dim); transition: background 0.25s, color 0.25s; }
.tm-filter button:hover { color: var(--fg); }
.tm-filter button[aria-selected="true"] { background: var(--cobalt); color: var(--cloud); }
.tm-filter button i { font-style: normal; font-family: var(--mono); font-size: 11px; opacity: 0.7; }
.tm-filter button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.tm-bar-hint { margin: 0; font-size: 13px; color: var(--fg-mute); }

/* ── desks: person cards ── */
.tm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.tm-card { perspective: 900px; cursor: pointer; }
.tm-card[hidden] { display: none; }
.tm-card.reveal { transition-delay: calc(var(--i, 0) * 60ms); }
.tm-card-tilt {
  --rx: 0deg;
  --ry: 0deg;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-card);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), border-color 0.3s, box-shadow 0.4s;
}
.tm-card:hover .tm-card-tilt { border-color: var(--accent-line); box-shadow: 0 26px 50px -34px rgba(0, 51, 153, 0.6); }
.tm-card:hover .tm-photo img { transform: scale(1.06); }
.tm-card:hover .tm-photo.is-ph::after { transform: scale(1.045); }
.tm-card[data-desk="voice"]:hover .tm-card-tilt { border-color: color-mix(in srgb, var(--ember) 45%, transparent); box-shadow: 0 26px 50px -34px rgba(229, 88, 44, 0.55); }
.tm-card-meta { display: grid; align-content: start; gap: 0; padding: 14px 6px 6px; }
.tm-card-name { margin: 12px 0 4px; font-family: var(--display); font-weight: 400; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.2; letter-spacing: -0.02em; }
.tm-card-role { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--fg-dim); }
.tm-card-acts { display: flex; align-items: center; gap: 6px; padding: 8px 6px 4px; border-top: 1px dashed var(--line); margin-top: 8px; }
.tm-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--fg-dim); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.tm-ic:hover { color: var(--cloud); background: var(--cobalt); border-color: var(--cobalt); }
.tm-card[data-desk="voice"] .tm-ic:hover { background: var(--ember); border-color: var(--ember); }
.tm-card-more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px 8px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); transition: color 0.2s; }
.tm-card-more:hover, .tm-card:hover .tm-card-more { color: var(--accent); }
.tm-card-more svg { transition: transform 0.25s; }
.tm-card:hover .tm-card-more svg { transform: translate(2px, -2px); }
.tm-ic:focus-visible, .tm-card-more:focus-visible, .tm-copy:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ── profile drawer ── */
.tm-drawer { position: fixed; inset: 0; z-index: 200; }
.tm-drawer-scrim { position: absolute; inset: 0; background: rgba(10, 8, 28, 0.5); opacity: 0; transition: opacity 0.35s; }
.tm-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(500px, 100%);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  box-shadow: -30px 0 80px -30px rgba(10, 8, 28, 0.5);
  transform: translateX(104%);
  transition: transform 0.42s cubic-bezier(.2, .7, .2, 1);
  outline: none;
}
.tm-drawer.is-open .tm-drawer-scrim { opacity: 1; }
.tm-drawer.is-open .tm-drawer-panel { transform: none; }
.tm-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tm-drawer-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.tm-drawer-nav { display: flex; gap: 6px; }
.tm-drawer-nav button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--fg); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.tm-drawer-nav button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-faint); }
.tm-drawer-nav button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.tm-drawer-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
.tm-d-hero .tm-photo { aspect-ratio: 5 / 4; border-radius: 16px; clip-path: inset(0 round 16px); }
.tm-d-hero .tm-photo img { object-position: 50% 18%; }
.tm-d-hero .tm-photo.is-ph::after { inset: 8% 22% 0; }
.tm-d-hero .tm-photo::before { background-size: auto, 12px 12px, auto; }
.tm-d-info { padding: 22px 4px 8px; }
.tm-d-name { margin: 16px 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; letter-spacing: -0.03em; }
.tm-d-role { margin: 0 0 22px; font-size: 16px; color: var(--fg-dim); }
.tm-d-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tm-d-office { margin: 22px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }

/* toast */
.tm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 260;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--midnight);
  color: var(--cloud);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.tm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── responsive ── */
@media (max-width: 1100px) {
  .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-leads { grid-template-columns: 1fr; }
  .tm-lead { grid-template-columns: minmax(180px, 0.6fr) minmax(0, 1.4fr); }
}
@media (max-width: 900px) {
  .tm-banner-grid { grid-template-columns: 1fr; }
  .tm-deck { height: clamp(300px, 64vw, 400px); margin-top: 8px; }
}
@media (max-width: 640px) {
  .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tm-card-tilt { padding: 7px; border-radius: 16px; }
  .tm-card-meta { padding: 12px 4px 4px; }
  .tm-card-role { font-size: 12.5px; }
  .tm-chip { font-size: 9px; padding: 3px 7px; letter-spacing: 0.1em; }
  .tm-card-more { display: none; }
  .tm-card-acts { justify-content: flex-start; }
  .tm-lead { grid-template-columns: 1fr; }
  .tm-lead .tm-photo { aspect-ratio: 5 / 4; }
  .tm-lead .tm-photo img { object-position: 50% 20%; }
  .tm-lead .tm-photo.is-ph::after { inset: 10% 24% 0; }
  .tm-lead-body { padding: 4px 6px 8px; }
  .tm-deck { --gap: 38px; --rot: 7deg; --drop: 10px; }
  .tm-deck:hover, .tm-deck:focus-within { --gap: 44px; }
  .tm-deck-card { width: 132px; padding: 6px 6px 0; }
  .tm-deck-name b { font-size: 11.5px; }
  .tm-deck-name span { font-size: 8.5px; }
  .tm-banner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-banner-stats div { padding-right: 10px; }
  .tm-banner-stats div + div { padding-left: 12px; }
  .tm-banner-stats dd { white-space: normal; font-size: 15px; }
  /* the drawer becomes a bottom sheet */
  .tm-drawer-panel { top: auto; left: 0; width: 100%; height: min(92svh, 100%); border-radius: 22px 22px 0 0; transform: translateY(104%); }
  .tm-bar { margin-bottom: 16px; }
  .tm-filter { width: 100%; }
  .tm-filter button { flex: 1; justify-content: center; padding: 9px 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-deck-card { animation: none; transition: none; }
  .tm-card-tilt, .tm-photo img, .tm-photo.is-ph::after, .tm-drawer-panel, .tm-drawer-scrim { transition: none; }
}