:root {
  /* Logo colors */
  --deep-slate: #3d4a54;
  --steel-blue: #4579A1;
  --accent-blue: #ADD1ED;

  /* Text Colors */
  --heading: #2F3A43;
  --body: #4A555E;
  --muted-text: #6B7780;

  /* Backgrounds */
  --primary-bg: #F7F9FB;
  --secondary-bg: #EEF3F7;
  --box-shadow: rgba(61, 74, 84, .16);
  --menu-button: rgba(61, 74, 84, .5);
  --hero-overlay: rgba(61, 74, 84, .7);

  /* Buttons */
  --btn-bg: var(--steel-blue);
  --btn-color: #FFFFFF;
  --btn-hover: var(--deep-slate);
  --btn-radius: 6px;
  --btn-secondary-border: 2px solid var(--btn-bg);
  --btn-secondary-color: var(--btn-bg);
  --btn-secondary-bg: var(--btn-color);
  --btn-secondary-hover: var(--secondary-bg);

  /* Links */
  --link-color: var(--steel-blue);
  --link-hover: var(--deep-slate);

  /* Section Spacing */
  --section-padding: clamp(30px, 3vw, 100px);
  --max-width: 1200px;

  /* Font Weight */
  --thin: 100;
  --extra-light: 200;
  --light: 300;
  --normal: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --bold-black: 900;

  /* Transition */
  --global-transition: .3s ease-in-out;

  /* Callouts */
  --callout-bg: var(--secondary-bg);
  --callout-border: 4px solid var(--steel-blue);
  --callout-radius: 12px;
  --callout-padding: 20px; 

  /* Cards */
  --card-bg: #fff;
  --card-radius: var(--callout-radius);
  --card-shadow: var(--box-shadow);
  --card-padding: var(--callout-padding);
  --card-padding-lg: 40px;
  --card-border: var(--callout-border);

  /* Images */
  --img-radius: var(--callout-radius);
  --img-shadow: var(--box-shadow);
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* General Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Infant', serif;
  color: var(--heading);
  font-weight: var(--medium);
}
h1 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
  line-height: 1.22;
}
h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.3;
}
h4 {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.35;
}
body {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  background: var(--primary-bg);
  font-weight: var(--normal);
  color: var(--body);
  line-height: 1.6;
}
p.sm {
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  line-height: 1.5;
}
a:not(.button) {
  color: var(--link-color);
  transition: var(--global-transition);
}
a:not(.button):hover, a:not(.button):focus {
  color: var(--link-hover);
}
a.button {
  background-color: var(--btn-bg);
  border-radius: var(--btn-radius);
  transition: var(--global-transition);
  color: var(--btn-color);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  font-weight: var(--medium);
  letter-spacing: 0.02em;
}
a.button:hover, a.button:focus {
  background-color: var(--btn-hover);
}
a.button.secondary {
  background-color: var(--btn-secondary-bg);
  border: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
}
a.button.secondary:hover, a.button.secondary:focus {
  background-color: var(--btn-bg);
  color: var(--btn-color);
}

/* Header */
header {
  position: absolute;
  width: 100%;
  z-index: 100;
  transition: var(--global-transition);;
}
.header-navigation {
  background: var(--primary-bg);
  transition: var(--global-transition);
}
.is-sticky .header-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 3px 20px var(--box-shadow);
}
.header-navigation {
  padding: 15px 0 10px;
}
.header-social {
  background: var(--deep-slate);
  padding: 10px 0 3px;
}
.header-social > .grid-container {
  width: 100%;
}
.header-social > .grid-container .cell {
  max-width: 35px;
}
.header-social a svg {
  max-width: 20px;
  height: auto;
  transition: var(--global-transition);
  transform: scale(1);
}
.header-social svg path, .header-social svg polygon {
  fill: var(--secondary-bg);
}
.header-social a:hover svg, .header-social a:focus svg {
  transform: scale(1.1);
}

/* Menu */
.menu a {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  color: var(--heading);
  transition: var(--global-transition);
  font-weight: var(--medium);
  letter-spacing: 0.01em;
  padding: 14px 12px;
}
.menu a:hover, .menu a:focus, .menu .currentPage {
  color: var(--steel-blue);
}

/* Content */
.content-area > .grid-container {
  padding: var(--section-padding);
}
.content-area .grid-container {
  margin: 0 auto;
}
.content-area:nth-child(odd) {
  background-color: var(--secondary-bg);
}

/* Banner */
.home-banner, .sub-banner {
  position: relative;
  overflow: hidden;
  background-image: url("/images/home-banner.webp");
  background-size: cover;
  background-position: center;
}
.home-banner::before, .sub-banner::before, #footer-callout::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--hero-overlay);
  z-index: 0;
}
.home-banner > .grid-container, .sub-banner > .grid-container {
  padding: var(--section-padding);
  position: relative;
  z-index: 5;
  color: var(--primary-bg);
}
.home-banner_pre-heading {
  font-weight: var(--semi-bold);
  color: var(--primary-bg);
}
.home-banner_heading, .sub-banner_heading h1, .home-banner_heading h1 {
  color: var(--primary-bg);
  font-family: 'Cormorant Infant', serif;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Image Styles */
.rounded {
  border-radius: var(--img-radius);
  box-shadow: 0 0 15px var(--img-shadow);
}
.fill {
  overflow: hidden;
  position: relative;
  min-height: 400px;
  height: 100%;
}
.fill img {
  position: absolute;
  margin: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  transition: var(--global-transition);
}

/* Callouts */
#footer-callout {
  position: relative;
  overflow: hidden;
  background-image: url("/images/home-banner.webp");
  background-size: cover;
  background-position: center;  
  color:  var(--primary-bg);
}
#footer-callout h2 {
  color: inherit;
}
#footer-callout > .grid-container {
  position: relative;
  z-index: 5;
}

/* Cards */
.card {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: 0 0 15px var(--card-shadow);
  padding: var(--card-padding);
  border-top: var(--card-border);
  height: 100%;
  width: 100%;
}

/* Footer */
footer {
  padding: 10px 5px;
  background-color: var(--deep-slate);
  color: var(--primary-bg);
  font-size: 14px;
}

footer a {
  color: var(--primary-bg) !important;
  font-size: 14px !important;
  transition: var(--global-transition);
}

footer a:hover, footer a:focus {
  color: var(--secondary-bg) !important;
}

/* Medium and down */
@media screen and (max-width: 64em) {
  .header-navigation {
    background: var(--primary-bg);
  }
  .menu-icon-wrapper {
    float: right;
    margin-top: -20px;
  }
  .menu-icon::after {
    background: var(--deep-slate);
    box-shadow: 0 7px 0 var(--deep-slate), 0 14px 0 var(--deep-slate);
    transition: .3s ease-out;
  }
  .menu-icon:hover::after {
    background: var(--menu-button);
    box-shadow: 0 7px 0 var(--menu-button), 0 14px 0 var(--menu-button);
  }
  .menu {
    flex-direction: column;
  }
  .menu a {
    border-left: 4px solid transparent;
    padding: 5px 12px !important;
    margin: 5px 0;
  }
  .menu a:hover, .menu a:focus, .menu .currentPage {
    border-left: 4px solid var(--steel-blue);
  }
}

/* Large and up */
@media screen and (min-width: 64em) {
  .menu {
    justify-content: end;
  }
  .menu a {
    padding: 14px 12px !important;
    border-bottom: 4px solid transparent;
    margin: 0 12px;
  }
  .menu a:hover, .menu a:focus, .menu .currentPage {
    border-bottom: 4px solid var(--steel-blue);
  }
  a.button {
    margin-bottom: 0;
  }

  /* Banner */
  .home-banner .text-center {
    justify-content: start;
  }
  .home-banner .text-center .cell {
    text-align: left !important;
    max-width: 750px;
  }
  .home-banner_heading h1 {
    margin-bottom: 20px;
  }
  .home-banner_buttons .grid-x {
    gap: 12px;
  }
  .grid-x > .shrink {
    width: auto !important;
  }
  .sub-banner_message {
    max-width: 750px;
    width: 100%;
  }

  /* Cards */
  .card {
    padding: var(--card-padding-lg);
  }

  /* Callouts */
  #footer-callout a.button {
    float: right;
  }
}