@font-face {
    font-family: 'geosanslight';
    src: url('../webfonts/geosanslight-webfont.woff2') format('woff2'),
         url('../webfonts/geosanslight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

@font-face {
  font-family: 'Butler';
  src: url('../webfonts/Butler.woff2') format('woff2'),
       url('../webfonts/Butler.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* let text render with a fallback while it loads */
}

@font-face {
  font-family: 'High Empathy';
  src: url('../webfonts/high_empathy-webfont.woff2') format('woff2'),
       url('../webfonts/high_empathy-webfont.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'farewell_angelina_sampleRg';
    src: url('../webfonts/farewell_angelina_display_sample-webfont.woff2') format('woff2'),
         url('../webfonts/farewell_angelina_display_sample-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'slimshootregular';
    src: url('../webfonts/slimshoot-webfont.woff2') format('woff2'),
         url('../webfonts/slimshoot-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'phitradesign INK';
    src: url('../webfonts/phitradesign-INK.woff2') format('woff2'),
         url('../webfonts/phitradesign-INK.woff') format('woff'),
}

:root {
  --teal: #006D77;
  --sand: #F4EAE6;
  --sage: #A8C3A0;
  --gold: #C8B18A;
  --slate: #4A4A4A;
}


/* === Base Font + Color Overrides === */
body, input, select, textarea {
  font-family: 'geosanslight', sans-serif;
  color: #4A4A4A; /* Slate Gray */
  background-color: #F4EAE6; /* Warm Sand */
}

/* Headings */
h2, h3, h5, h6 {
  font-family: 'Lora', serif;
  color: #006D77; /* Deep Teal */
}

h1 {
  font-family: 'Butler', serif;
  font-size: 2.5rem;      /* ~40px if 1rem=16px */
  font-weight: normal;    /* or 400/700 if you have different Butler weights */
  line-height: 1.2;       /* tight leading for a bold hero */
  margin-bottom: 0.5em;
  color: var(--teal);     /* or whatever accent color you prefer */
}

h4 {
  font-family: 'phitradesign INK', sans-serif;
  font-size: 1rem;      /* ~20px */
  font-weight: 400;        /* regular weight */
  line-height: 1.4;
  margin-bottom: 0.5em;
  color: var(--teal);      /* keep your accent color */
}

/* Paragraph spacing */
p {
  margin-bottom: 1.5em;
}

/* Blockquotes */
blockquote {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  color: #C8B18A; /* Muted Gold */
  border-left: 4px solid #A8C3A0; /* Sage Green */
  padding-left: 1em;
  margin: 1.5em 0;
}

/* Accent class for testimonials or quotes */
.accent {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  color: #C8B18A;
}

/* === Logo Styling === */
.logo {
  /* no hard height on the anchor */
  vertical-align: middle;
}

.logo img {
  /* cap the image height instead */
  max-height: 2.5em;
  width: auto;
  display: block;
}

/* === Icon Styling === */
.icon-feature {
  height: 64px;
  margin-bottom: 1em;
}

/* === Buttons === */
.button,
input[type="submit"],
input[type="button"] {
  background-color: #006D77;
  color: #F4EAE6 !important;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #A8C3A0;
}

/* === Links === */
a {
  color: #006D77;
  border-bottom: 1px dotted #A8C3A0;
  text-decoration: none;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

a:hover {
  color: #A8C3A0;
  border-bottom-color: transparent;
}

/* === Section Background Utilities === */
.bg-sand {
  background-color: #F4EAE6;
  color: #4A4A4A;
}

.bg-teal {
  background-color: #006D77;
  color: #F4EAE6;
}

.bg-sage {
  background-color: #A8C3A0;
  color: #4A4A4A;
}

.bg-gold {
  background-color: #C8B18A;
  color: #4A4A4A;
}

.bg-slate {
  background-color: #4A4A4A;
  color: #F4EAE6;
}

/* === Text Color Utilities === */
.text-teal { color: #006D77; }
.text-sand { color: #F4EAE6; }
.text-sage { color: #A8C3A0; }
.text-gold { color: #C8B18A; }
.text-slate { color: #4A4A4A; }

/* === Font Utility Classes === */
.font-serif {
  font-family: 'Playfair Display', serif;
}

.font-sans {
  font-family: 'Open Sans', sans-serif;
}

.font-accent {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
}

#banner {
  background-color: var(--sand);
  color: var(--slate);
}
#banner h2,
#banner p {
  color: var(--slate);
}

/* Headshot styling */
.headshot {
  width: 200px;              /* force a square */
  height: 200px;             /* same as width */
  object-fit: cover;         /* crop/scale the image to fill the box */
  border-radius: 50%;        /* 50% of width/height → perfect circle */
  border: 3px solid var(--gold);
  margin-bottom: 1.5em;
  display: block;            /* removes any inline spacing quirks */
}

.offer-box p strong {
  font-family: 'Lora', serif;
  font-weight: 700;
}

.offer-box ul {
  display: inline-block;     /* shrink-wrap the UL */
  text-align: left;          /* align bullets and text together */
  padding-left: 1.25em;      /* indent bullets properly */
  margin: 1em auto;          /* vertical spacing + center block */
  list-style-position: outside;
}

/* === Offerings as responsive cards === */
.offer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;

  /* Prevent cards from stretching to match the tallest card */
  align-items: start;
}

.offer-box {
  background-color: #fff;
  border: 1px solid var(--sage);
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  text-align: left;
}

/* center only the header block in each offer-box */
.offer-box h3,
.offer-box h4,
.offer-box > p:nth-of-type(1),
.offer-box > p:nth-of-type(2) {
  text-align: center;
}

/* Shrink the landing‐page banner */
body.landing #banner {
  padding: 4em 0 !important;
}