: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);
}
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);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
  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;
}
.card-defaults:hover{
  box-shadow: 0 2px 4px rgba(38,51,43,.08), 0 24px 48px -24px rgba(38,51,43,.4);
  transform: translateY(-2px);
}
.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);
}