: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);
}
.leadership{
    color: #1D2C44;
    padding: var(--spacingLarge) 0;
    background: #FFF;
}
.leadership__inner{
    max-width: 1217px;
    margin: 0 auto;
    display: grid;
    gap: var(--spacingLarge);
}
.leadership__header{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacingLarge);
}
.leadership__eyebrow{
    color: var(--leadership-accent, rgb(201, 111, 74));
}
.leadership__title{
    margin: 0;
    max-width: 600px;
}
.leadership__intro{
    margin: 0;
    max-width: none;
    font-size: 16px;
    line-height: 1.55;
    color: #5C6A5F;
}

/* Mobile-first: card and panel are plain siblings, one column, stacked in
   source order (card, its panel, next card, ...). The min-width: 992px block
   below re-pins the same elements into two columns for desktop — nothing in
   the DOM changes between breakpoints. */
.leadership__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacingMedium);
}
.leadership__card{
    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);
}
.leadership__card-image{
    position: relative;
    overflow: hidden;
    background: #E5E0D2;
    box-shadow: var(--boxShadowDefault);
    aspect-ratio: 4 / 3;
}
.leadership__card-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}
.leadership__card-meta{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.leadership__card-name{
    font-family: var(--_typography---font-styles--heading);
    font-size: 32px;
    line-height: 1.15;
    color: #26332B;
}
.leadership__card-role{
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5C6A5F;
}

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

/* Desktop: cards go down column 1 (grid-row set per card via
   --leadership-row, from leadership.tsx); panels all occupy one sticky cell
   in column 2 spanning every row, cross-fading by scroll position — only
   .leadership__panel--active is visible. visibility: hidden on the inactive
   ones also keeps them out of the accessibility tree, so no aria-hidden
   bookkeeping is needed in JS. */
@media (min-width: 992px){
    .leadership{
        padding: var(--spacingExtraLarge) 0;
    }
    .leadership__header{
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .leadership__intro{
        max-width: 360px;
    }
    .leadership__grid{
        grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
        gap: var(--spacingExtraLarge);
        align-items: start;
        border-top: var(--borderDefault);
        padding: var(--spacingLarge) 0;
    }
    .leadership__credentials-list{
        gap: var(--spacingSmall) 0;
    }
    .leadership__card{
        grid-column: 1;
        grid-row: var(--leadership-row);
        height: 540px;
    }
    .leadership__card-image{
        flex: 1 1 0%;
        min-height: 0;
        aspect-ratio: auto;
        opacity: 0.45;
        transition: opacity 400ms ease;
    }
    .leadership__card-image--active{
        opacity: 1;
    }
    .leadership__panel{
        grid-column: 2;
        grid-row: 1 / -1;
        margin-top: 0;
        position: sticky;
        top: calc(var(--leadership-nav-offset, 0px) + 48px);
        align-self: start;
        opacity: 0;
        transform: translateX(-24px);
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 300ms ease,
            transform 300ms ease,
            visibility 0s linear 300ms;
    }
    .leadership__panel--active{
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 400ms ease-out 80ms,
            transform 400ms ease-out 80ms,
            visibility 0s linear 0s;
    }
    .leadership__credentials-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce){
    .leadership__panel,
    .leadership__panel--active{
        transform: none;
        transition: none;
    }
}