.location-graphic{
    background: #FFFDF6;
    padding: var(--spacingExtraLarge) 4.5rem;
}
.location-graphic__inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: flex-start;
    max-width: 76rem;
    margin: 0 auto;
    gap: 100px;
}

.location-graphic__content,
.location-graphic__visual {
    min-width: 0;
}

.location-graphic__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-graphic__nodes {
    padding-top: var(--spacingMedium);
    list-style: none;
    display: flex;
    flex-direction: column;
    padding-left: unset;
}
.location-graphic__nodes-subtext{
    margin-top: var(--spacingMedium);
}

.location-graphic__nodes li {
    border-bottom: var(--borderDefault);
}
.location-graphic__nodes li:first-child {
    border-top: var(--borderDefault);
}
.location-graphic__node {
    appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--spacingSmall);
    justify-content: space-between;
    padding: var(--spacingMedium) var(--spacingSmall);
    transition: background 0.28s ease;
}
.location-graphic__node:hover,
.location-graphic__node--active {
    background: #F1EADD;
    text-decoration: underline;
}
.location-graphic__node--city {
    font-size: 18px;
    line-height: 1.6;
    font-family: var(--_typography---font-styles--heading);
    letter-spacing: 0.02em;
    font-weight: normal;
}
.location-graphic__node--county {
    font-size: 14px;
    font-weight: 400;
    color: #8A7A62;
}
.location-graphic__node--node {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(47, 74, 60, 0.18);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.location-graphic__node--node::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2F4A3C;
    animation: location-graphic-node-pulse 2s ease-in-out infinite;
}
@keyframes location-graphic-node-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }
}
.location-graphic__visual {
    position: relative;
    overflow: visible;
    min-height: 350px;
    position: sticky;
    top: 150px;
    box-shadow: 0 1px 2px rgba(38, 51, 43, .06), 0 18px 40px -28px rgba(38, 51, 43, .35);
}
.location-graphic__visual img{
    object-fit: cover;
    inset: 0;
    width: 100%;
    position: absolute;
    object-position: center;
    height: 100%;
}
.location-graphic__pins {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.location-graphic__pin {
    position: absolute;
    transform: translate(-50%, -50%);
}
.location-graphic__pin-button {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.location-graphic__pin-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #26332B;
    white-space: nowrap;
    transition: color 0.35s ease;
}
.location-graphic__pin--active .location-graphic__node--node {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(47, 74, 60, 0.15);
}
.location-graphic__pin--active .location-graphic__pin-label {
    color: #2F4A3C;
}
.location-graphic__map-note {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: var(--spacingMedium);
    display: flex;
    align-items: center;
    gap: var(--spacingSmall);
    font-size: 14px;
    line-height: 1.5;
    color: #5C6A5F;
}
.location-graphic__map-note svg {
    flex-shrink: 0;
}

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

    .location-graphic__inner {
        grid-template-columns: 1fr;
        gap: var(--spacingMedium);
    }

    .location-graphic__content,
    .location-graphic__visual,
    .location-graphic__map-note {
        grid-column: 1;
        grid-row: auto;
    }

    .location-graphic__visual {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
}

: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;
 /* 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;
}
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);
    transform: translateY(-2px);
}
.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: 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: #26332B;
    margin-top: 16px;
    margin-bottom: 20px;
    font-weight: normal;
}

.content-block__subheader {
    margin-top: unset;
    font-size: 18px;
    line-height: 1.6;
    color: #5C6A5F;
}

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