@font-face {
  font-family: "Samsaara Satoshi";
  src: url("fonts/satoshi/Satoshi-Variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 300 900;
}

@font-face {
  font-family: "Samsaara Fraunces";
  src: url("fonts/fraunces/Fraunces-Variable.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Samsaara Playfair Display";
  src: url("fonts/playfair-display/PlayfairDisplay-Variable.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400 900;
}

:root {
  --samsaara-font-sans: "Samsaara Satoshi", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --samsaara-font-serif: "Samsaara Fraunces", Georgia, "Times New Roman", serif;
  --samsaara-font-display: "Samsaara Playfair Display", Georgia, "Times New Roman", serif;
  --sans: var(--samsaara-font-sans);
  --serif: var(--samsaara-font-serif);
}

html,
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea,
.site-header,
.site-menu,
.hero-search,
.search-panel,
.footer-inner,
footer,
nav {
  font-family: var(--samsaara-font-sans) !important;
}

p,
.hero-lines,
.hero-subtitle,
.lead,
.section-copy,
.concierge-showcase-copy,
.experience-copy > p,
.experience-item p,
.planning-copy,
.owner-copy p,
.home-owner__description,
.results-note,
.property-copy,
.story-copy,
.service-card p,
.feature-card p,
.memory-card p,
.practical-card p,
blockquote {
  font-family: var(--samsaara-font-serif) !important;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 300;
}

.hero-lines {
  font-weight: 400;
}

h1,
h2,
.hero h1,
.section-heading h2,
.center-heading h2,
.commitment-band h2,
.planning-content h2,
.concierge-showcase h2,
.owner-copy h2,
.wide-section h2,
.services-title,
.help-section h2,
.value-item h3 {
  font-family: var(--samsaara-font-display) !important;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.brand,
.site-chrome-logo,
.site-chrome-contact,
.site-menu,
.site-menu h2,
.site-menu h3,
.site-menu p,
.site-menu a,
.site-menu button,
.eyebrow,
.value-kicker,
.guest-favorites-kicker,
.panel-title,
.destination-option,
.destination-card-mini,
.destination-card-mini strong,
.search-field,
.search-field strong,
.search-submit,
.dark-cta,
#our-homes,
.homes-category,
.calendar-head,
.calendar-week,
.calendar-grid button,
.guest-option,
.villa-title-row h2,
.villa-content h3,
.villa-content p,
footer h3,
footer a,
footer span,
footer#contact h3,
footer#contact a,
footer#contact span,
.samsaara-contact-modal,
.samsaara-contact-modal h2,
.samsaara-contact-lines,
.samsaara-contact-lines p,
.samsaara-contact-lines a,
.samsaara-contact-action {
  font-family: var(--samsaara-font-sans) !important;
}

.samsaara-contact-modal h2 {
  font-weight: 500;
}

.samsaara-contact-lines,
.samsaara-contact-lines p {
  font-weight: 400;
  line-height: 1.65;
}

.samsaara-contact-lines {
  gap: 10px;
}

.samsaara-contact-action {
  font-weight: 500;
}

.brand,
.site-chrome-logo {
  font-weight: 500 !important;
}

.search-field,
.destination-option,
.destination-card-mini,
footer a,
footer span {
  font-weight: 400;
}

@media (max-width: 620px) {
  .hero .eyebrow {
    font-size: clamp(12.3px, 3.34vw, 13.5px) !important;
  }

  .hero h1 {
    font-size: clamp(22.3px, 6.08vw, 24.6px) !important;
    line-height: 0.96;
  }

  .hero-lines {
    flex-wrap: nowrap !important;
    gap: clamp(2px, 0.9vw, 4px) !important;
    font-size: clamp(10.2px, 3.15vw, 12.4px) !important;
    white-space: nowrap;
  }

  .inspiration-link {
    height: clamp(22.4px, 6.14vw, 24.8px) !important;
    min-height: clamp(22.4px, 6.14vw, 24.8px) !important;
    gap: clamp(4.7px, 1.28vw, 5.3px) !important;
    font-size: clamp(9.5px, 2.55vw, 10.5px) !important;
  }

  .inspiration-link span {
    height: clamp(15.4px, 4.19vw, 16.9px) !important;
    padding: 0 5px !important;
    font-size: inherit !important;
  }
}