@charset "UTF-8";

/* Subtle glass refinements keep the existing card geometry and type. */
body.page-home #home .person-card,
body.page-home #home .person-liu {
  background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(249,252,255,.46) 58%, rgba(242,246,253,.40));
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  box-shadow:
    0 18px 40px -26px rgba(81,92,115,.24),
    0 4px 14px -9px rgba(89,100,122,.12),
    0 0 18px -10px rgba(255,255,255,.46),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.55);
}
body.page-home #home .person-card::before {
  background:
    radial-gradient(ellipse at var(--px,18%) var(--py,8%), rgba(255,255,255,.35), transparent 64%),
    radial-gradient(ellipse at 96% 76%, rgba(193,210,245,.08), transparent 65%),
    linear-gradient(130deg, transparent 42%, rgba(255,255,255,.12) 67%, transparent 82%);
}
body.page-home #home .person-card::after {
  background:
    radial-gradient(ellipse 52px 22px at 13% 0%, #fff, rgba(255,255,255,.10) 75%, transparent),
    radial-gradient(ellipse 24px 62px at 100% 73%, rgba(255,255,255,.98), transparent 85%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(194,218,245,.50) 38%, rgba(230,219,243,.34) 66%, rgba(255,235,217,.75));
}
body.page-home #home .person-card:hover {
  box-shadow:
    0 20px 44px -26px rgba(81,92,115,.28),
    0 5px 16px -9px rgba(89,100,122,.14),
    0 0 22px -10px rgba(255,255,255,.50),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(255,255,255,.60);
}

/* The original pill and plus keep their size on the photographic cover. */
body.page-home #film .film-play.view-action {
  position: relative;
  color: #f8fbff !important;
  border-color: rgba(255,255,255,.76) !important;
  background: rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 0 14px rgba(255,255,255,.14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.page-home #film .film-play.view-action::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 38px 14px at 22% 0%, #fff, transparent 85%),
    radial-gradient(ellipse 15px 30px at 100% 73%, rgba(255,255,255,.92), transparent 85%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
body.page-home #film .film-play.view-action:hover {
  color: #fff !important;
  background: rgba(255,255,255,.21) !important;
}
body.page-home #film .film-play.view-action > .plus {
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

/* Service bullets share the existing profile copy's type and margins. */
body.page-home #home .person-card .person-service-list {
  list-style: none;
  padding: 0;
}
body.page-home #home .person-card .person-service-list > li {
  display: grid;
  grid-template-columns: .7em minmax(0, 1fr);
  column-gap: .4em;
  text-wrap: balance;
}
body.page-home #home .person-card .person-service-list > li::before {
  content: "•";
}

/* Portrait rims catch soft light while a small shadow separates the glass card. */
body.page-home #home .person-card .portrait {
  clip-path: none;
  border: 5px solid transparent;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 8%, #d9e4f1 47%, #eef5fc 72%, #fff 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.95),
    0 0 0 2px rgba(124,145,168,.16),
    0 6px 16px -5px rgba(57,74,102,.25),
    0 12px 28px -13px rgba(72,91,120,.18),
    0 -2px 10px rgba(255,255,255,.72);
}

/* The profile copy determines the card height, including the full viewing pill. */
body.page-home #home .duo-stage { align-items: stretch; }
body.page-home #home .person-card {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  justify-content: flex-start;
  overflow: visible;
}
body.page-home #home .person-card::before { border-radius: inherit; }
body.page-home #home .person-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(12px, 1.25vw, 20px);
  min-width: 0;
}
body.page-home #home .person-top > div { min-width: 0; }
body.page-home #home .person-top h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
}
body.page-home #home .person-top .person-name {
  flex: 0 0 auto;
  white-space: nowrap;
}
body.page-home #home .person-top .person-specialty {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  color: var(--site-body, #7b746e);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.6;
  letter-spacing: .015em;
  white-space: normal;
  word-break: normal;
}
body.page-home #home .person-role,
body.page-home #home .person-description {
  max-width: 100%;
  overflow-wrap: anywhere;
}
body.page-home #home .person-card > .text-button {
  flex: 0 0 auto;
  align-self: flex-start;
  max-width: 100%;
  margin-top: auto;
}

/* The homepage keeps its supplied images in two matching, thin phone outlines. */
body.page-home #work #live-frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 1.8vw, 20px);
  width: 100%;
  max-width: 480px;
  min-width: 0;
  height: auto;
  aspect-ratio: auto;
  margin: 0 auto;
  perspective: none;
  transform: none !important;
  transform-style: flat;
  transition: none;
}
body.page-home #work #live-frames > .floating-frame,
body.page-home #work #live-frames:hover > .floating-frame {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 852 / 1846;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 18px;
  background: linear-gradient(140deg, #ffffff, #e7edf1 46%, #f8fbfd);
  box-shadow:
    0 15px 30px -18px rgba(67, 81, 95, .26),
    0 3px 10px -6px rgba(89, 108, 125, .16),
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(188, 205, 216, .3);
  filter: none;
  transform: none;
  transition: none;
  overflow: hidden;
}
body.page-home #work #live-frames > .floating-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(130deg, #fff 2%, #ffffff66 32%, #bfd4e366 64%, #fff 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
body.page-home #work #live-frames > .floating-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}
@media (max-width: 760px) {
  body.page-home #home .person-top .person-specialty { font-size: 15px; }
  body.page-home #work #live-frames { max-width: 420px; }
  body.page-home #work #live-frames > .floating-frame {
    padding: 2px;
    border-radius: 15px;
    box-shadow: 0 12px 23px -16px rgba(67, 81, 95, .28), inset 0 1px 0 #fff;
  }
  body.page-home #work #live-frames > .floating-frame > img { border-radius: 11px; }
}
@media (max-width: 380px) {
  body.page-home #home .person-top h2 { column-gap: 10px; }
  body.page-home #home .person-top .person-specialty { font-size: 14px; }
  body.page-home #work #live-frames { gap: 10px; }
  body.page-home #work #live-frames > .floating-frame { border-radius: 13px; }
  body.page-home #work #live-frames > .floating-frame > img { border-radius: 9px; }
}

/* Contact shares the selected-work section's existing neutral grey. */
body.page-home #contact { background: #f1f1f1; }