/* -------------------------------------- */
/* TEAM HERO SECTION                      */
/* -------------------------------------- */
body, html {
  scrollbar-width: auto;      /* Firefox base: auto | thin */
  -ms-overflow-style: auto;   /* Old IE/Edge */
}

/* Reserve space to avoid layout shift when scrollbars appear */
html {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Firefox colors (thumb | track) and thin width */
html {
  scrollbar-width: auto;
  scrollbar-color: #F16629 #FFEAE0;
}

/* Chrome/Edge/Safari */
html::-webkit-scrollbar {
  width: 10px;                /* adjust 8–12px */
}
html::-webkit-scrollbar-track {
  background: #FFEAE0;        /* track color */
}
html::-webkit-scrollbar-thumb {
  background: #F16629;        /* thumb color */
  border-radius: 8px;         /* subtle rounding */
}
/* Optional hover shade (1 extra rule) */
html::-webkit-scrollbar-thumb:hover {
  background: #D4571F;
}
@keyframes teamFadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.team-hero {
  background: #F16629;
  border-bottom-left-radius: 16rem;
  border-bottom-right-radius: 16rem;
  padding: 9rem 1rem 4rem 1rem;
  color: #fff;
  margin-top: -10rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: teamFadeDown 1.1s cubic-bezier(.4,0,.2,1) both;
}

.team-subtitle,
.team-header,
.team-desc {
  opacity: 0;
  animation: teamFadeDown 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.team-subtitle { animation-delay: 0.1s; }
.team-header { animation-delay: 0.3s; font-weight: 500; }
.team-desc { animation-delay: 0.5s; max-width: 500px; }

.team-header {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 500; /* reduced font weight */
}
.team-desc {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 60%; /* reduce width */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.team-desc .partner-link {
  color: #fff;                 /* keep it white on orange */
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

/* hover / focus */
.team-desc .partner-link:hover,
.team-desc .partner-link:focus {
  color: #fff;                 /* keep white */
  text-decoration-color: rgba(255,255,255,0.9);
  outline: none;
  box-shadow: 0 0 0 3px rgba(241,102,41,0.08); /* subtle focus ring */
  border-radius: 4px;
}

/* -------------------------------------- */
/* COOL BROKER CARD ENTRANCE ANIMATION    */
/* -------------------------------------- */
@keyframes brokerCardStaggeredFlip {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateY(80deg) scale(0.7) translateY(60px);
    filter: blur(8px) brightness(1.2);
  }
  40% {
    opacity: 1;
    transform: perspective(600px) rotateY(-10deg) scale(1.05) translateY(-10px);
    filter: blur(2px) brightness(1.05);
  }
  70% {
    transform: perspective(600px) rotateY(4deg) scale(0.98) translateY(4px);
    filter: blur(0.5px) brightness(1);
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg) scale(1) translateY(0);
    filter: blur(0) brightness(1);
  }
}

.team-brokers {
  margin-top: -6rem; /* overlap cards over orange hero section */
  margin-bottom: 5rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 2rem;
}

.team-brokers .broker-card {
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 4px 18px rgba(241,102,41,0.10);
  padding: 2.5rem 1.5rem 2rem 1.5rem;
  color: #F16629;
  min-height: 340px;
  min-width: 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
  animation: brokerCardStaggeredFlip 1.3s cubic-bezier(.4,0,.2,1) both;
  animation-delay: 0.5s;
  position: relative;
  overflow: hidden;
}
.team-brokers .broker-card:nth-child(1) { animation-delay: 0.5s; }
.team-brokers .broker-card:nth-child(2) { animation-delay: 0.65s; }
.team-brokers .broker-card:nth-child(3) { animation-delay: 0.8s; }
.team-brokers .broker-card:nth-child(4) { animation-delay: 0.95s; }
.team-brokers .broker-card:nth-child(5) { animation-delay: 1.1s; }
.team-brokers .broker-card:nth-child(6) { animation-delay: 1.25s; }
.team-brokers .broker-card:nth-child(7) { animation-delay: 1.4s; }
.team-brokers .broker-card:nth-child(8) { animation-delay: 1.55s; }

/* -------------------------------------- */
/* BROKER CARD ELEMENTS                   */
/* -------------------------------------- */
.broker-img {
  width: 120px;
  height: 120px;
  border-radius: 1.5rem;
  object-fit: cover;
  margin-bottom: 1.2rem;
  background: #eee;
  box-shadow: 0 2px 12px rgba(241,102,41,0.08);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.broker-card:hover .broker-img {
  transform: scale(1.08) rotate(-2deg);
}

.broker-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}
.broker-title {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #F16629;
  background: #fff3ea;
  border-radius: 0.7em;
  padding: 0.2em 0.7em;
  display: inline-block;
}
.broker-email, .broker-phone {
  font-size: 1rem;
  color: #444;
  margin-bottom: 0.3rem;
  word-break: break-all;
  transition: color 0.2s;
}
.broker-email a, .broker-phone a {
  color: #F16629;
  text-decoration: none;
  font-weight: 500;
}
.broker-email a:hover, .broker-phone a:hover {
  text-decoration: underline;
  color: #d44c00;
}
.broker-extra {
  font-size: 0.95rem;
  color: #888;
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
  text-align: center;
}

/* -------------------------------------- */
/* TEAM PCAP PAGE NAVBAR CUSTOMIZATION    */
/* -------------------------------------- */
.team-pcap-page .navbar {
  color: #fff !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: none !important;
}

.team-pcap-page .navbar .nav-link,
.team-pcap-page .navbar .navbar-brand {
  color: #fff !important;
  font-weight: 500;
}

.team-pcap-page .navbar .nav-link:hover,
.team-pcap-page .navbar .nav-link:focus {
  color: #F16629 !important;
  background: #fff !important;
  border-radius: 0.3em;
}

.team-pcap-page .dropdown-menu {
  background: #fff3ea;
  border-radius: 0.5em;
  border: none;
}

.team-pcap-page .dropdown-item {
  color: #F16629 !important;
  font-weight: 500;
}

.team-pcap-page .dropdown-item:hover,
.team-pcap-page .dropdown-item:focus {
  background: #F16629 !important;
  color: #fff !important;
}

/* -------------------------------------- */
/* MEDIA QUERIES                          */
/* -------------------------------------- */
@media (max-width: 430px) and (orientation: portrait) {
  /* Hide scrollbar on mobile (still scrollable) */
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar { display: none; }

  /* Hero tweaks in rem */
  .team-hero {
    padding: 8rem 1rem 1.5rem;
    margin-top: -10rem;
    margin-bottom: 1.5rem;
    border-bottom-left-radius: 8rem;
    border-bottom-right-radius: 8rem;
    text-align: center;
  }
  .team-subtitle { font-size: 0.9rem; }
  .team-header   { font-size: 1.7rem; font-weight: 600; margin-bottom: 0.5rem; }
  .team-desc     { font-size: 0.92rem; max-width: 92%; margin-bottom: 1rem; }

  /* Brokers: grid on the row */
  .team-brokers {
    margin-top: -2rem;
    margin-bottom: 2rem;                          /* more breathing room */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    padding: 0 0.5rem;
  }
  .team-brokers .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    justify-content: initial;
  }
  .team-brokers .row > [class^="col-"],
  .team-brokers .row > [class*=" col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }

  /* Cards: auto height + uniform vertical rhythm via gap */
  .team-brokers .broker-card {
    width: 100%;
    max-width: 100%;
    min-width: unset !important;
    min-height: 0 !important;     /* override desktop 340px */
    height: auto;
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    margin: 0;
    animation-duration: 0.9s;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;                   /* consistent space between items */
    overflow: visible;
  }

  /* Element sizing (relative) */
  .broker-img {
    width: 4.75rem; height: 4.75rem;
    border-radius: 0.75rem;
    margin: 0;                    /* use gap instead */
    object-fit: cover;
  }

  /* Show full names; no clamp; center text */
  .broker-name {
    display: block;
    font-size: 1rem;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-align: center;
  }

  /* Keep title tidy on one line (change to wrap if you prefer) */
  .broker-title {
    font-size: 0.8rem;
    padding: 0.15em 0.5em;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    background: #fff3ea;          /* preserve tag style */
    border-radius: 0.7em;
    color: #F16629;
  }

  /* Single-line truncation for contact lines */
  .broker-email,
  .broker-phone {
    font-size: 0.82rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
  }

  /* Optional supporting line, up to 2 lines */
  .broker-extra {
    font-size: 0.78rem;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-align: center;
  }
}