/* Styled to match leadership.css's visual system exactly — same card
   framing, same typography/colors for name, role, body text, and
   credentials list, same "Credentials" eyebrow+icon label and divider. */
.leader-bio{
    color: #1D2C44;
    background: #FFF;
    padding: var(--spacingExtraLarge) 0;
}
.leader-bio__inner{
    max-width: 1217px;
    margin: 0 auto;
    padding: 0 4.5rem;
    display: grid;
}
.leader-bio__inner-main{
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: var(--spacingMedium);
}
.leader-bio__intro{
    margin-bottom: var(--spacingLarge);
}
.leader-bio__intro .content-block__header{
    max-width: 700px;
}

.leader-bio__left{
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacingMedium);
    display: flex;
    flex-direction: column;
    gap: var(--spacingSmall);
    box-shadow: 0 2px 4px rgba(38, 51, 43, .08), 0 24px 48px -24px rgba(38, 51, 43, .4);
    background: #FFF;
}
.leader-bio__left--image{
    position: relative;
    overflow: hidden;
    background: #E5E0D2;
    box-shadow: var(--boxShadowDefault);
    aspect-ratio: 4 / 3;
    flex: 1;
}
.leader-bio__left--image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    object-position: center 25%;
}
.leader-bio__left--meta{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.leader-bio__left--meta-name{
    font-family: var(--_typography---font-styles--heading);
    font-size: 32px;
    line-height: 1.15;
    color: #26332B;
}
.leader-bio__left--meta-title{
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5C6A5F;
}

.leader-bio__right{
    display: flex;
    flex-direction: column;
    gap: var(--spacingMedium);
}
.leader-bio__section-content{
    font-size: 16px;
    color: #5C6A5F;
}
.leader-bio__section-content > * + *{
    margin-top: var(--spacingMedium);
}
.leader-bio__credentials-section{
    display: flex;
    flex-direction: column;
    gap: var(--spacingSmall);
    padding-top: var(--spacingSmall);
    border-top: var(--borderDefault);
}
.leader-bio__credentials-label.eyebrow{
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    color: var(--brown, #5A231B);
}
.leader-bio__credentials{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacingSmall) 0;
}
.leader-bio__credentials ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.leader-bio__credentials li{
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #5C6A5F;
    break-inside: avoid;
}
.leader-bio__credentials li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(201, 111, 74);
}

@media (min-width: 992px){
    .leader-bio{
        padding: var(--spacingExtraLarge) 0;
    }
    .leader-bio__inner-main{
        grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
        gap: var(--spacingExtraLarge);
        border-top: var(--borderDefault);
        padding: var(--spacingLarge) 0 0;
    }
    .leader-bio__credentials{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
    }
    /* Only at desktop does the card get a fixed height, matching
       leadership.css's .leadership__card — on mobile this (plus the
       height:100% it forced on the image, stacked on top of the image's
       own aspect-ratio: 4/3) is what was pushing the image past the
       viewport, since aspect-ratio and an explicit height fight for which
       one controls the image's final width. */
    .leader-bio__left{
        min-height: 540px;
    }
    .leader-bio__left--image{
        height: 100%;
        aspect-ratio: auto;
    }
}

@media(max-width: 991px){
    .leader-bio__inner{
        padding-left: 5%;
        padding-right: 5%;
    }
}

:host {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 22 22%27 fill=%27none%27%3E%3Cpath d=%27M10.6445 0C16.5234 0 21.2898 4.76568 21.29 10.6445C21.29 16.5236 16.5236 21.29 10.6445 21.29C4.76568 21.2898 0 16.5234 0 10.6445C0.000253564 4.76583 4.76583 0.000253569 10.6445 0ZM9.43359 6.1709C9.10584 5.8433 8.57391 5.84339 8.24609 6.1709C7.91826 6.49873 7.91827 7.03153 8.24609 7.35938L11.8496 10.9629L8.24805 14.5664C7.92059 14.8941 7.92067 15.4261 8.24805 15.7539C8.57589 16.0817 9.10868 16.0817 9.43652 15.7539L13.6328 11.5576L13.6299 11.5557C13.9576 11.2278 13.9577 10.695 13.6299 10.3672L9.43359 6.1709Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%274%27 y1=%2712%27 x2=%2720%27 y2=%2712%27/%3E%3Cpolyline points=%2714 6 20 12 14 18%27/%3E%3C/svg%3E");
  --arrow-left:  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%2720%27 y1=%2712%27 x2=%274%27 y2=%2712%27/%3E%3Cpolyline points=%2710 6 4 12 10 18%27/%3E%3C/svg%3E");
  --arrow-down:  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235C6F54%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  --terracottaAccent: #C06A45;
  --brown: #5A231B;
  --green: #01562b;
  --olive: #667038;
  --accentColor: var(--green);
 /* Spacing */
  --spacingExtraSmall: 6px;
  --spacingSmall: 12px;
  --spacingMedium: 24px;
  --spacingSemilarge: 32px;
  --spacingLarge: 48px;
  --spacingExtraLarge: 80px;
  --spacingDoubleExtraLarge: 150px;

 /* border-radius */
 --borderRadiusSmall: 16px;

 /* border */
 --borderColorDefault: #EBE4D4;
 --borderDefault: 1px solid var(--borderColorDefault);

 /* box-shadow */
 --boxShadowDefault: 0 18px 40px -28px rgba(38, 51, 43, .35);
}
body{
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-weight: normal;
}
.text-medium{
    letter-spacing: -0.01em;
    font-size: 1.125rem;
    line-height: 1.25;
}

button{
  appearance: none;
  border: unset;
  padding: unset;
  background: unset;
}
.button{
    display: inline-flex;
    gap: 1.25rem;
    background-color: rgb(201, 111, 74);
    color: rgb(255, 248, 242);
    text-align: center;
    text-transform: uppercase;
    text-wrap: pretty;
    border-radius: 100px;
    border: 2px solid transparent;
    justify-content: center;
    align-items: center;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    font-weight: 900;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform 200ms ease-out;
}
.button:hover{
    background-color: transparent;
    border-color: rgb(201, 111, 74);
    color: rgb(201, 111, 74);
}
.is-pale-yellow{
    background-color: var(--_primitives---colors--pale-yellow);
    color: var(--_primitives---colors--chocolate);
}

.icon-arrow-cta:after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor; /* mask = the paint comes from here */
  -webkit-mask-image: var(--icon-arrow);
          mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}


@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeSlideLeftOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }

h2{
  font-family: var(--_typography---font-styles--heading);
  font-size: 3rem;
  line-height: 1.1;
  font-weight: normal;
  margin-top: var(--spacingSmall);
  margin-bottom: var(--spacingMedium);
}

h3{
    font-family: var(--_typography---font-styles--heading);
    font-size: 28px;
    line-height: 33.6px;
    font-weight: normal;
    margin-top: var(--spacingSmall);
    margin-bottom: var(--spacingMedium);
}

.card-defaults{
  background: #FFFDF8;
  border: var(--borderDefault);
  border-radius: var(--borderRadiusSmall);
  box-shadow: 0 1px 2px rgba(38,51,43,.06), 0 18px 40px -28px rgba(38,51,43,.35);
  text-decoration: none;
  width: 100%;
  padding: unset;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.card-defaults h3{
    margin: unset;
}
.card-defaults:hover .icon-next:after{
    transform: translateX(10px);
}
.card-defaults__description{
    font-size: 15px;
    line-height: 1.6;
    color: #5C6A5F;
}
.card-defaults__tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EEF3EA;
    border: 1px solid #D7E2CF;
    border-radius: 99px;
    padding: 7px 15px;
    margin-top: 32px;
    font-size: 14px;
    font-weight: 600;
    color: #34503F;
}
.eyebrow{
    font-family: "Swiss 721 Bt", Arial, sans-serif;
    font-size: 16px;
    letter-spacing: .64px;
    font-weight: 700;
    color: var(--intro-eyebrow-color, rgb(201, 111, 74));
    margin-bottom: 12px;
    text-transform: uppercase;
}

.icon-prev, .icon-next{
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}
.icon-prev::before {
  width: 24px;
  height: 24px;
  content:'';
  background-color: currentColor; /* arrow takes button text color */
  -webkit-mask: var(--arrow-left) center / contain no-repeat;
          mask: var(--arrow-left) center / contain no-repeat;
}
.icon-next::after {
  width: 24px;
  height: 24px;
  content:'';
  background-color: currentColor;
  -webkit-mask: var(--arrow-right) center / contain no-repeat;
  mask: var(--arrow-right) center / contain no-repeat;
  transition: .3s ease;
}
.primary-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: rgb(201, 111, 74);
  color: rgb(255, 248, 242);
  text-align: center;
  text-transform: uppercase;
  text-wrap: pretty;
  font-weight: 900;
  font-size: .875rem;
  padding: .75rem 1.5rem;
  border-radius: 100px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform 200ms ease-out;
}
.primary-button:hover{
  background: transparent;
  border-color: rgb(201, 111, 74);
  color: rgb(201, 111, 74);
  transform: translateY(-2px);
}

.tab-button{ 
  display: inline-flex;
  background: rgba(247, 244, 236, 0.4);
  color: #5A231B;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 36px;
  border-radius: 50px;
  text-decoration: none;
  border: 1px solid rgba(107, 43, 34, 0.35);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.tab-button:hover, .tab-button--active{
    background: #5A231B;  
    border: 1px solid rgba(107, 43, 34, 0.35);
    color: #F7F4EC;
}
.content-block {
    display: flex;
    justify-content: center;
    padding-bottom: var(--spacingLarge);
}

.content-block__inner {
    max-width: 720px;
    text-align: center;
}

.content-block--left-align {
    justify-content: flex-start;
}

.content-block--left-align .content-block__inner {
    text-align: left;
}

.content-block__header {
    font-size: 48px;
    line-height: 52.8px;
    font-family: var(--_typography---font-styles--heading);
    color: var(--intro-header-color, #26332B);
    margin-top: 16px;
    margin-bottom: 20px;
    font-weight: normal;
}

.content-block__subheader {
    margin-top: unset;
    font-size: 18px;
    line-height: 1.6;
    color: var(--intro-subheader-color, #5C6A5F);
}

.content-block:has(.button) .content-block__subheader {
    margin-bottom: var(--spacingSemilarge);
}