@charset "utf-8";
:root{
  --hp4u-team-gap: 2px;
  --hp4u-team-borderwidth: 0;
  --hp4u-team-maxw: 1200px;
  --hp4u-team-name: #4d5259;
  --hp4u-team-role: #4d5259;
  --hp4u-team-bg: transparent;
  --hp4u-team-border: transparent;
  --hp4u-accent: #d9875c;
  --hp4u-accent-text: #ffffff;
  --hp4u-focus-ring: #0b63ce;
  --hp4u-radius: 0;
  --hp4u-cols: 3;
  --hp4u-sticky-offset: 70px;
	--hp4u-card-ratio:800/700;
}
.hp4u-team { container-type:inline-size; }
.hp4u-team-card { scroll-margin-top: var(--hp4u-sticky-offset); }
.hp4u-team-panel-inner { display: flow-root; }
.hp4u-team-panel :is(p, ul, ol):last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Wrapper */
.hp4u-team{ max-width:var(--hp4u-team-maxw); margin:0 auto 2rem auto; padding-inline:0; }
.hp4u-team-title{ text-align:center; margin:0; }

/* Grid */
/* Grid as UL: remove default list styling */
.hp4u-team-grid{
  list-style: none!important;
  margin: 0!important;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: var(--hp4u-team-gap);
}
.hp4u-team-grid{ display:flex; flex-wrap:wrap; gap:var(--hp4u-team-gap); }

.hp4u-team-card{
  box-sizing: border-box;
  background: var(--hp4u-team-bg);
  border: var(--hp4u-team-borderwidth) solid var(--hp4u-team-border);
  border-radius: var(--hp4u-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  flex: 0 0 33.333%;
  max-width: calc((100% - 2 * var(--hp4u-team-gap)) / 3);
}
.hp4u-team--cols-4 .hp4u-team-card {
  flex: 0 0 25%;
  max-width: calc((100% - 2 * var(--hp4u-team-gap)) / 4);
	  box-sizing: border-box; 
  flex: 0 0 calc((100% - (3 * var(--hp4u-team-gap))) / 4);
  max-width: calc((100% - (3 * var(--hp4u-team-gap))) / 4);
}
.hp4u-team--cols-3 .hp4u-team-card {
	 box-sizing: border-box;
  flex: 0 0 33.333%;
  max-width: calc((100% - 2 * var(--hp4u-team-gap)) / 3);
}
.hp4u-team--cols-2 .hp4u-team-card {
	 box-sizing: border-box;
   flex: 0 0 50%;
  max-width: calc((100% - 1 * var(--hp4u-team-gap)) / 2);
}

/* Tablet (always 2 cols) */
@media (max-width: 1023px) {
  .hp4u-team-card,  .hp4u-team--cols-3 .hp4u-team-card, .hp4u-team--cols-2 .hp4u-team-card {
 flex: 0 1 50%; 
	  max-width: calc((100% - 1 * var(--hp4u-team-gap)) / 2);
  }
	.hp4u-team--cols-4 .hp4u-team-card {
	 box-sizing: border-box;
  flex: 0 0 33.333%;
  max-width: calc((100% - 2 * var(--hp4u-team-gap)) / 3);
}
}
@media (max-width: 340px) {
   .hp4u-team-card, .hp4u-team--cols-4 .hp4u-team-card, .hp4u-team--cols-3 .hp4u-team-card, .hp4u-team--cols-2 .hp4u-team-card {
    flex: 0 1 100%!important;
    max-width: 100%;
  }	
}
/* Mobile (always 1 col) */
@media (max-width: 600px) {
   .hp4u-team-card, .hp4u-team--cols-3 .hp4u-team-card, .hp4u-team--cols-2 .hp4u-team-card {
    flex: 0 1 100%!important;
    max-width: 100%;
  }
	.hp4u-team--cols-4 .hp4u-team-card {
	 box-sizing: border-box;
 flex: 0 1 50%; 
	  max-width: calc((100% - 1 * var(--hp4u-team-gap)) / 2);
}
}
/* Tablet (2 cols) */
@media (max-width: 1023px) {
  .hp4u-team-card { flex: 0 1 50%; max-width: calc((100% - 1 * var(--hp4u-team-gap)) / 2); }
}
/* Mobile (1 col) */
@media (max-width: 600px) {
  .hp4u-team-card { flex: 0 1 100%; max-width: 100%; }
}
@media (max-width: 350px) {
   .hp4u-team-card, .hp4u-team--cols-4 .hp4u-team-card, .hp4u-team--cols-3 .hp4u-team-card, .hp4u-team--cols-2 .hp4u-team-card {
    flex: 0 1 100%!important;
    max-width: 100%;
  }	
}
/* Click area */
.hp4u-team-click{ position:relative; }

/* ===== Hover-swap image stack ===== */
.hp4u-team-figure{
  margin:0;
  position: relative;
  aspect-ratio: 4 / 3;     /* keeps space; images are absolutely positioned */
  overflow: hidden;
}
.hp4u-team-photo{
  position: absolute; inset: 0;
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.hp4u-team-photo--alt{
  opacity: 0;
  transition: opacity .25s ease;
}
.hp4u-team-card--link:hover .hp4u-team-photo--alt,
.hp4u-team-card--link:focus-within .hp4u-team-photo--alt,
.hp4u-team-card--link.is-open .hp4u-team-photo--alt{
  opacity: 1;
}
/* image area: two-image stack (B/W under, color over) */
.hp4u-team-click{ position:relative; }
.hp4u-team-figure{ margin:0; position:relative; aspect-ratio:4 / 3; overflow:hidden; }
.hp4u-team-figure { overflow:hidden; } /* keeps layout clean if any jitter */
.hp4u-team-photo{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  object-fit:cover;
  pointer-events:none; /* overlay control receives events */
}
.hp4u-team-photo--main{ z-index:0; }
.hp4u-team-photo--alt{  z-index:1; opacity:0!important; transition:opacity .25s ease!important;}

.hp4u-team-card--link:hover .hp4u-team-photo--alt,
.hp4u-team-card--link:focus-within .hp4u-team-photo--alt,
.hp4u-team-card--link.is-open .hp4u-team-photo--alt{ opacity:1!important;}
@media (prefers-reduced-motion:reduce){ .hp4u-team-photo--alt{ transition:none; } }
/* reduce-motion: no animation */
@media (prefers-reduced-motion: reduce){
  .hp4u-team-photo--alt { transition: none; }
}

/* Header */
.hp4u-team-header{
  padding: .2rem 1rem 1rem .7rem;
  background: transparent;
  color: inherit;
  transition: color .18s ease;
  text-align: center;
}
.hp4u-team-name{
  margin:.25rem 0 .1rem 0;
  font-family:var(--hp4u-base-font-family);
  color: var(--hp4u-team-name);
  font-weight:var(--hp4u-main-fontweight-bold);
}
.hp4u-team-role{ margin:0; color:var(--hp4u-team-role); }

/* Overlay button for a11y */
.hp4u-team-toggle{ position:absolute; inset:0; background:none; border:0; cursor:pointer; }

.hp4u-team-panel{
  display:none;
  padding:0 1rem 2rem 1rem;
  background: transparent;
  color: inherit;
  text-align:left;
  box-sizing:border-box;
}
.hp4u-team { --hp4u-eq-panel-h: auto; }
.hp4u-team-panel { min-height: var(--hp4u-eq-panel-h); }

/* OPEN STATE */
.hp4u-team-card.is-open{
  background: var(--hp4u-accent);
  color: var(--hp4u-accent-text);
  border-color: var(--hp4u-accent);
}
.hp4u-team-card.is-open .hp4u-team-name,
.hp4u-team-card.is-open .hp4u-team-role{ color: var(--hp4u-accent-text); }
.hp4u-team-card.is-open .hp4u-team-panel{ display:block; }

/* Screen-reader only utility */
.hp4u-sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.hp4u-team-link{ position:absolute; inset:0; display:block; text-decoration:none; background:transparent; border:0; }
.hp4u-team-card--link .hp4u-team-header{ cursor:pointer; }
.hp4u-team-card--static .hp4u-team-header{ cursor:default; }

/* Team panel content spacing */
.hp4u-team-panel p{ margin:0 0 .7rem 0; }
.hp4u-team-panel ul{ margin:.4rem 0 .8rem 1.1rem; }
.hp4u-team-panel li{ margin:.25rem 0; }
.hp4u-team-panel :is(p, ul, ol):last-child { margin-bottom: 0; }
.hp4u-team { align-items: start; }

/* Custom bullets (white arrow) inside panels */
.hp4u-team-panel-inner ul { list-style: none; padding-left: 0; margin-left: 0; }
.hp4u-team-panel-inner ul li { position: relative; padding-left: 1.6em; }
.hp4u-team-panel-inner ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 1.05em; height: 0.72em;
  background-color: #fff;
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16.99 11.71%22%3E%3Cpolygon fill=%22currentColor%22 points=%224.7 11.71 4.7 7.75 5.77 7.75 5.77 10.01 14.5 5.85 5.77 1.7 5.77 6.39 0 6.39 0 5.32 4.7 5.32 4.7 0 16.99 5.85 4.7 11.71%22/%3E%3C/svg%3E') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16.99 11.71%22%3E%3Cpolygon fill=%22currentColor%22 points=%224.7 11.71 4.7 7.75 5.77 7.75 5.77 10.01 14.5 5.85 5.77 1.7 5.77 6.39 0 6.39 0 5.32 4.7 5.32 4.7 0 16.99 5.85 4.7 11.71%22/%3E%3C/svg%3E') no-repeat center / contain;
}
@supports not (-webkit-mask: none) {
  .hp4u-team-panel-inner ul li::before {
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16.99 11.71%22%3E%3Cpolygon fill=%22%23fff%22 points=%224.7 11.71 4.7 7.75 5.77 7.75 5.77 10.01 14.5 5.85 5.77 1.7 5.77 6.39 0 6.39 0 5.32 4.7 5.32 4.7 0 16.99 5.85 4.7 11.71%22/%3E%3C/svg%3E');
    background-repeat: no-repeat; background-position: center; background-size: contain;
  }
}
/* Suppress hover/focus color swap while this class is present */
.hp4u-team-card.no-hover .hp4u-team-photo--alt { opacity: 0 !important; }
.hp4u-team-card.no-hover:hover .hp4u-team-photo--alt,
.hp4u-team-card.no-hover:focus-within .hp4u-team-photo--alt { opacity: 0 !important; }