/* ==========================================================================
   NorthStar Insights — Our Advisors page
   Builds on css/styles.css. Desktop values are --u design pixels (1440 frame).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Introduction
   -------------------------------------------------------------------------- */
.team-intro { padding-top: calc(195 * var(--u)); text-align: center; }
.team-intro__title {
  font-size: calc(64 * var(--u));
  line-height: calc(76 * var(--u));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--burgundy);
}
.team-intro__sub {
  margin-top: calc(18 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
  color: var(--burgundy);
}
.team-intro__lead {
  max-width: calc(1040 * var(--u));
  margin: calc(12 * var(--u)) auto 0;
  font-size: calc(28 * var(--u));
  line-height: calc(35 * var(--u));
  color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   AdvisorFilters
   -------------------------------------------------------------------------- */
.directory { padding: calc(98 * var(--u)) 0 calc(150 * var(--u)); }
.team-filters { position: relative; z-index: 5; }
.team-filters__bar {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: calc(64 * var(--u));
  border-bottom: 1px solid rgba(80, 5, 35, .16);
}
.team-filters__tabs { display: flex; justify-content: center; gap: calc(30 * var(--u)); }
/* Filter labels: quiet burgundy text with a fine down-chevron, as in the reference */
.filter-tab {
  position: relative;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(64 * var(--u));
  padding: 0 calc(6 * var(--u));
  font-size: calc(22 * var(--u));
  color: var(--burgundy);
}
.filter-tab::after {
  content: ""; position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); bottom: -1px; height: 2px;
  background: var(--burgundy); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.filter-tab:hover::after, .filter-tab:focus-visible::after, .filter-tab.is-open::after { transform: scaleX(1); }
.filter-tab__count { font-size: .8em; opacity: .8; }
.filter-tab__chev {
  width: calc(13 * var(--u)); height: calc(8 * var(--u));
  min-width: 11px; min-height: 7px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  transition: transform .45s var(--ease-out);
}
.filter-tab.is-open .filter-tab__chev { transform: rotate(180deg); }
.filter-tab.has-selection .filter-tab__label, .filter-tab.is-open .filter-tab__label { font-weight: 600; }
.team-filters__reset {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: calc(18 * var(--u)); color: var(--burgundy);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: opacity .3s ease;
}
.team-filters__reset:disabled { opacity: .35; cursor: default; text-decoration-color: transparent; }

/* FilterDropdown — an ivory sheet under the bar: title, top-level options with
   square boxes, their sub-options indented beneath (after the supplied reference) */
.filter-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  min-height: calc(300 * var(--u));
  padding: calc(40 * var(--u)) calc(32 * var(--u)) calc(52 * var(--u));
  background: #faf8f4;
  border-bottom: 1px solid rgba(80, 5, 35, .16);
  box-shadow: 0 24px 40px -32px rgba(80, 5, 35, .35);
  color: var(--burgundy);
  overflow: hidden;
  animation: panel-in .45s var(--ease-out);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.filter-panel__title {
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  font-weight: 600;
  color: var(--burgundy);
}
.filter-panel__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(28 * var(--u));
  margin-top: calc(40 * var(--u));
}
.filter-panel__children { margin: calc(22 * var(--u)) 0 0 calc(40 * var(--u)); }
.filter-panel__children li + li { margin-top: calc(18 * var(--u)); }
/* Sub-options: smaller type and box so long offering names sit on one or two lines */
.filter-panel__children .filter-option {
  align-items: flex-start; gap: calc(10 * var(--u));
  font-size: calc(17 * var(--u)); line-height: calc(23 * var(--u));
}
.filter-panel__children .filter-option__box { width: calc(20 * var(--u)); height: calc(20 * var(--u)); min-width: 16px; min-height: 16px; margin-top: calc(1.5 * var(--u)); }
.filter-panel__children li + li { margin-top: calc(14 * var(--u)); }
.filter-option {
  display: inline-flex; align-items: center; gap: calc(14 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(26 * var(--u));
  color: var(--burgundy);
  cursor: pointer;
}
.filter-option--parent { font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 500; }
.filter-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Square checkbox: fine burgundy outline; fills burgundy with an ivory tick when chosen */
.filter-option__box {
  flex: none; display: grid; place-items: center;
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  min-width: 18px; min-height: 18px;
  border: 1.5px solid var(--burgundy);
  background: transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.filter-option--parent .filter-option__box { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.filter-option__box svg {
  width: 72%; height: 72%;
  fill: none; stroke: #faf8f4; stroke-width: 2;
  stroke-dasharray: 16; stroke-dashoffset: 16;
  transition: stroke-dashoffset .3s var(--ease-out);
}
.filter-option:hover .filter-option__box { background: rgba(80, 5, 35, .06); }
.filter-option input:checked + .filter-option__box { background: var(--burgundy); }
.filter-option input:checked + .filter-option__box svg { stroke-dashoffset: 0; }
.filter-option input:focus-visible + .filter-option__box { outline: 2px solid var(--gold); outline-offset: 3px; }
.filter-option__label { position: relative; }
.filter-option__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.filter-option:hover .filter-option__label::after { transform: scaleX(1); }
.filter-panel__clear {
  position: absolute; right: calc(40 * var(--u)); top: calc(48 * var(--u));
  font-size: calc(18 * var(--u)); color: var(--burgundy);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
/* NorthStar corner arrow, a quiet signature in the sheet's corner */
.filter-panel__arrow {
  position: absolute; right: 0; bottom: 0;
  width: calc(96 * var(--u)); height: calc(96 * var(--u));
  min-width: 64px; min-height: 64px;
  fill: none; stroke: rgba(80, 5, 35, .28); stroke-width: 1.4; stroke-linejoin: miter;
  transform: scaleX(-1);
  overflow: visible;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   AdvisorGrid / AdvisorCard
   -------------------------------------------------------------------------- */
.advisor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gutter);
  row-gap: calc(106 * var(--u));
  margin-top: calc(92 * var(--u));
  transition: opacity .22s ease;
}
.advisor-grid.is-updating { opacity: 0; }
.advisor[hidden] { display: none; }
.advisor { text-align: center; }
.advisor__photo {
  aspect-ratio: 310 / 364;
  overflow: hidden;
  background: #f2e9dd;
  cursor: pointer;
}
.advisor__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0); transform: scale(1);
  transition: filter .8s var(--ease-out), transform 1s var(--ease-out);
}
@media (hover: hover) {
  .advisor:hover .advisor__photo img { filter: grayscale(1); transform: scale(1.06); }
}
/* Grayscale + zoom is a transient hover state only (never kept by focus or selection) */
.advisor__name button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.advisor__name { margin-top: calc(21 * var(--u)); }
.advisor__name button {
  font-size: calc(28 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--burgundy);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 92%;
  transition: background-size .45s var(--ease-out);
}
.advisor__name button:hover, .advisor__name button:focus-visible { background-size: 100% 1px; }
.advisor__role {
  margin-top: calc(4 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  color: var(--ink);
}
.advisor__role strong { font-weight: 600; }
/* Lets the longest title (Founder and Chief Executive Officer) stay on one line by borrowing a few px of gutter */
.advisor__role { margin-inline: calc(-8 * var(--u)); }
.profile__title { font-weight: 700; }
.advisor-grid__empty { padding: calc(80 * var(--u)) 0; text-align: center; font-size: calc(22 * var(--u)); }
.advisor-grid__reset { margin-top: 16px; color: var(--burgundy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   AdvisorProfileModal — full viewport, image left / profile right
   -------------------------------------------------------------------------- */
html.is-locked, html.is-locked body { overflow: hidden; }
.profile {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: 50.5% 1fr;
  background: var(--white);
  opacity: 0;
  transition: opacity .38s ease;
}
.profile.is-open { opacity: 1; }
.profile[hidden] { display: none; }
.profile__media { position: relative; overflow: hidden; background: #f0ebe6; }
.profile__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile__star {
  position: absolute; left: calc(36 * var(--u)); top: calc(36 * var(--u));
  width: calc(48 * var(--u)); height: calc(46 * var(--u));
  min-width: 34px; min-height: 32px;
  fill: var(--burgundy);
}
.profile__body {
  position: relative;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(76 * var(--u)) calc(110 * var(--u)) calc(64 * var(--u)) calc(37 * var(--u));
  outline: none;
}
.profile__close {
  position: fixed; top: calc(34 * var(--u)); right: calc(38 * var(--u)); z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--burgundy);
}
.profile__close svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; transition: transform .45s var(--ease-out); }
.profile__close:hover svg { transform: rotate(90deg); }
.profile__content { max-width: calc(620 * var(--u)); }
.profile__name {
  font-size: calc(56 * var(--u));
  line-height: calc(64 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--burgundy);
}
.profile__title { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.35; color: var(--ink); }
.profile__bio { margin-top: calc(30 * var(--u)); }
.profile__bio p { font-size: calc(24 * var(--u)); line-height: calc(35 * var(--u)); color: var(--ink); }
.profile__bio p + p { margin-top: 1em; }
.profile__section { margin-top: calc(36 * var(--u)); }
.profile__label { font-size: calc(17 * var(--u)); font-weight: 700; color: var(--burgundy); text-transform: uppercase; letter-spacing: .06em; }
.profile__tags { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.profile__tags li {
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border: 1px solid rgba(80, 5, 35, .35);
  font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--burgundy);
}
.profile__location { margin-top: calc(56 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.4; color: var(--ink); }
.profile__contact { margin-top: calc(56 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.4; }
.profile__contact a[href^="mailto"] { color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .3s ease; }
.profile__contact a[href^="mailto"]:hover { text-decoration-color: currentColor; }
.profile__linkedin { display: inline-block; margin-top: calc(10 * var(--u)); color: var(--ink); transition: color .3s ease; }
.profile__linkedin svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 22px; min-height: 22px; fill: currentColor; }
.profile__linkedin:hover, .profile__linkedin:focus-visible { color: #0a66c2; }
.profile__practices { margin-top: calc(10 * var(--u)); font-size: calc(18 * var(--u)); color: var(--ink); }

/* Closing CTA */
.team-cta { margin-top: calc(120 * var(--u)); text-align: center; }
.team-cta__lead { margin-bottom: calc(26 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 600; color: var(--burgundy); }

/* ==========================================================================
   Tablet (≤1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  .team-intro { padding-top: 140px; }
  .team-intro__title { font-size: 48px; line-height: 58px; }
  .team-intro__sub { font-size: 22px; line-height: 30px; margin-top: 14px; }
  .team-intro__lead { font-size: 20px; line-height: 30px; }

  .directory { padding: 72px 0 104px; }
  .team-filters__tabs { gap: 20px; }
  .filter-tab { height: 52px; font-size: 18px; gap: 8px; }
  .team-filters__reset { font-size: 15px; }
  .filter-panel { min-height: 0; max-height: min(70vh, 620px); overflow-y: auto; padding: 28px 28px 72px; }
  .filter-panel__title { font-size: 22px; }
  .filter-panel__cols { grid-template-columns: repeat(2, 1fr); row-gap: 32px; column-gap: 28px; margin-top: 28px; }
  .filter-panel__children { margin: 16px 0 0 30px; }
  .filter-panel__children li + li { margin-top: 14px; }
  .filter-option { font-size: 17px; line-height: 23px; gap: 12px; }
  .filter-option--parent { font-size: 20px; line-height: 26px; }
  .filter-panel__clear { right: 28px; top: 30px; font-size: 16px; }

  .advisor-grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 56px; margin-top: 56px; }
  .advisor__name { margin-top: 16px; }
  .advisor__name button { font-size: 24px; line-height: 30px; }
  .advisor__role { font-size: 16px; line-height: 21px; }

  .profile { grid-template-columns: 44% 1fr; }
  .profile__body { padding: 72px 40px 48px 32px; }
  .profile__close { top: 16px; right: 16px; }
  .profile__name { font-size: 40px; line-height: 46px; }
  .profile__title { font-size: 17px; }
  .profile__bio p { font-size: 18px; line-height: 28px; }
  .profile__label { font-size: 14px; }
  .profile__tags li { font-size: 14px; padding: 4px 10px; }
  .profile__location, .profile__contact { font-size: 16px; margin-top: 36px; }
}

/* ==========================================================================
   Mobile (≤767px): profile stacks, the whole dialog scrolls
   ========================================================================== */
@media (max-width: 767px) {
  .team-intro { padding-top: 116px; }
  .team-intro__title { font-size: 40px; line-height: 48px; }
  .team-intro__sub { font-size: 19px; line-height: 26px; }
  .team-intro__lead { font-size: 17px; line-height: 26px; }

  .team-filters__bar { justify-content: flex-start; }
  .team-filters__tabs { gap: 14px; }
  .filter-tab { height: 48px; padding: 0 2px; font-size: 15px; gap: 6px; }
  .filter-panel { max-height: 64vh; padding: 22px 20px 40px; }
  .filter-panel__clear { right: 20px; top: 24px; }
  .filter-panel__cols { grid-template-columns: 1fr; row-gap: 26px; }
  .filter-option { font-size: 16px; line-height: 22px; min-height: 30px; }

  .advisor-grid { column-gap: 14px; row-gap: 40px; margin-top: 40px; }
  .advisor__name { margin-top: 12px; }
  .advisor__name button { font-size: 18px; line-height: 23px; }
  .advisor__role { font-size: 13px; line-height: 18px; }

  .profile { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .profile__media { height: min(70vh, 125vw); }
  .profile__body { overflow: visible; padding: 28px 20px 48px; }
  .profile__close { top: 12px; right: 12px; background: rgba(255, 255, 255, .85); border-radius: 50%; }
  .profile__content { max-width: none; }
  .profile__name { font-size: 34px; line-height: 40px; }
  .profile__bio { margin-top: 20px; }
  .profile__bio p { font-size: 17px; line-height: 27px; }
}

@media (max-width: 419px) {
  .advisor-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .advisor__name button { font-size: 24px; line-height: 30px; }
  .advisor__role { font-size: 16px; line-height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile, .advisor-grid, .advisor__photo img, .filter-tab__chev { transition-duration: .01ms !important; }
  .filter-panel { animation: none; }
}