:root {
  --vs-navy: #10183f;
  --vs-ink: #010102;
  --vs-gold: #bd9657;
  --vs-sand: #e1cfb3;
  --vs-body-font: poppins, sans-serif;
  --vs-heading-font: noto-serif, serif;
  --vs-script-font: sarah-script, cursive;
}
.site-home { margin: 0; }
.vs-section {
  color: var(--vs-navy);
  font-family: var(--vs-body-font);
  font-size: 1rem;
  line-height: 1.5;
  & h1, & h2, & h3, & p { margin: 0; }
  & h2 { font-family: var(--vs-heading-font); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; line-height: 1.2; }
  & a { color: inherit; }
  & :focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
  & :where(.vs-eyebrow) { color: #1f2f7c; font-size: 1rem; font-weight: 500; letter-spacing: 0.3em; line-height: 1.4; text-transform: uppercase; }
}
.vs-container { inline-size: min(calc(100% - 2rem), 88rem); margin-inline: auto; }
.vs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border: 1px solid var(--vs-navy);
  border-radius: 0.375rem;
  font-family: var(--vs-body-font);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
  &:hover { color: white; background: var(--vs-navy); }
}
.vs-card {
  --vs-card-active: 0;
  --vs-card-edge: polygon(100% 0,0 0,0 99.21%,1% 99.21%,2% 99.2%,3% 99.19%,4% 99.17%,5% 99.15%,6% 99.12%,7% 99.09%,8% 99.05%,9% 99%,10% 98.96%,11% 98.9%,12% 98.85%,13% 98.78%,14% 98.72%,15% 98.65%,16% 98.58%,17% 98.5%,18% 98.42%,19% 98.33%,20% 98.25%,21% 98.16%,22% 98.07%,23% 97.97%,24% 97.87%,25% 97.77%,26% 97.67%,27% 97.57%,28% 97.47%,29% 97.37%,30% 97.26%,31% 97.16%,32% 97.05%,33% 96.95%,34% 96.84%,35% 96.74%,36% 96.64%,37% 96.53%,38% 96.43%,39% 96.34%,40% 96.24%,41% 96.14%,42% 96.05%,43% 95.96%,44% 95.88%,45% 95.79%,46% 95.71%,47% 95.64%,48% 95.56%,49% 95.5%,50% 95.43%,51% 95.37%,52% 95.31%,53% 95.26%,54% 95.21%,55% 95.17%,56% 95.13%,57% 95.1%,58% 95.07%,59% 95.05%,60% 95.03%,61% 95.02%,62% 95.01%,63% 95.01%,64% 95.02%,65% 95.03%,66% 95.04%,67% 95.06%,68% 95.08%,69% 95.11%,70% 95.15%,71% 95.19%,72% 95.23%,73% 95.28%,74% 95.33%,75% 95.39%,76% 95.45%,77% 95.52%,78% 95.59%,79% 95.66%,80% 95.74%,81% 95.82%,82% 95.91%,83% 95.99%,84% 96.08%,85% 96.18%,86% 96.27%,87% 96.37%,88% 96.47%,89% 96.57%,90% 96.67%,91% 96.77%,92% 96.88%,93% 96.98%,94% 97.09%,95% 97.19%,96% 97.3%,97% 97.4%,98% 97.5%,99% 97.61%,100% 97.71%);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-inline-size: 0;
  padding: 1.25rem 1.25rem 3rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background: transparent;
  color: var(--vs-ink);
  filter: drop-shadow(0 1px 2px rgb(16 24 63 / 20%));
  text-decoration: none;
  &::before, &::after { content: ''; position: absolute; inset: 0; border-radius: 0.5rem 0.5rem 0 0; clip-path: var(--vs-card-edge); pointer-events: none; }
  &::before { z-index: -1; background: white; }
  &::after { z-index: -2; background: var(--vs-gold); transform: translateY(4px); }
  & .vs-card__image { inline-size: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 0.5rem; }
  & h2, & h3 { font-family: var(--vs-body-font); font-size: 1.125rem; font-weight: 500; line-height: 1.25; }
  & p { font-size: 0.8rem; line-height: 1.6; }
  & .vs-card__action {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    margin-block-start: auto;
    padding-block-start: 0.75rem;
    color: var(--vs-navy);
    font-weight: 600;
    & .vs-card__action-label {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        inset-block-end: -0.25rem;
        block-size: 0.125rem;
        background: var(--vs-gold);
        transform: scaleX(var(--vs-card-active));
        transform-origin: left;
        transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
      }
    }
    & .vs-card__action-arrow {
      color: var(--vs-gold);
      font-size: 1.75rem;
      line-height: 1;
      transform: translateX(calc(var(--vs-card-active) * 0.4rem));
      transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
    }
  }
  &:focus-visible {
    --vs-card-active: 1;
  }
  @media (hover: hover) and (pointer: fine) {
    &:any-link:hover {
      --vs-card-active: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    & .vs-card__action-label::after, & .vs-card__action-arrow { transition: none; }
    & .vs-card__action-arrow { transform: none; }
  }
}
@media (min-width: 768px) { .vs-container { inline-size: min(calc(100% - 4rem), 88rem); } }
@media (prefers-reduced-motion: reduce) { .vs-button { transition: none; } }