@font-face {
    font-family: 'Self Modern';
    src: url('../fonts/self-modern-regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Self Modern';
    src: url('../fonts/self-modern-italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-300-italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-regular-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-500-italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-bold-italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Palette: Storm/Olive/Peach Citrus/Piña/Pear ("Refreshing, light & clean").
       primaryDark isn't one of the reference swatches -- it's Storm darkened
       ~30%, since the palette's darkest tone (Storm) is also the brand
       primary, and a hover-fill needs something darker than that to read
       against white button text. */
    --primary: #68736b;
    --primaryDark: #4a524d;
    --primaryLight: #b8b89d;
    --secondary: #ffd9a0;
    --secondaryDark: #f48c25;
    --secondaryLight: #eee7d2;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

html {
    scroll-behavior: smooth;
}

/* Offsets anchor-scroll targets so the fixed floating nav doesn't cover
   the top of the section they link to */
#hero-2274,
#about-2905,
#services-3312,
#book-consultation-6042 {
    scroll-margin-top: 6rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Gotham', sans-serif;
}

/* Inherit the body font into form controls, which don't inherit it by default */
button, input, textarea, select {
    font-family: inherit;
}

*, *:before, *:after {
    box-sizing: border-box;
}

/* Nav text */
#cs-navigation .cs-li-link {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    line-height: 21.45px;
    letter-spacing: 1.04px;
    word-spacing: 0;
}

/*-- -------------------------- -->
<---            Logo            -->
<--- -------------------------- -*/

/* Mark + wordmark lockup. Site-wide so the footer can reuse the same markup. */
#cs-navigation .cs-logo {
    gap: 0.625rem;
    text-decoration: none;
}

/* Fixed height, not 100%. On mobile nav.css gives .cs-logo an indefinite
   height, and a percentage against that makes the SVG fall back to its
   default replaced-element size and blow up. */
.cs-logo-mark {
    width: auto;
    height: 2rem;
    flex: none;
}

.cs-logo-text {
    /* 18px - 20px */
    font-family: 'Self Modern', serif;
    font-size: clamp(1.375rem, 2.6vw, 1.625rem);
    font-weight: 300;
    line-height: 1.2em;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--headerColor);
}

.cs-logo-text span {
    font-weight: 300;
    color: var(--primary);
}

/*-- -------------------------- -->
<---          Button 1          -->
<--- -------------------------- -*/

/* The site-wide button. Every .cs-button-solid on the site uses this --
   nav, hero, and any section added later. Do NOT restyle .cs-button-solid
   inside a section stylesheet; change it here so all buttons stay in sync.
   The 3rem line-height is load-bearing: the nav's content box is 48px
   (6rem height - 2x1.5rem padding), and anything taller pushes the nav
   logo and button below the nav links.
   Background is --secondary (Peach Citrus), not --primary (Storm): Peach
   Citrus fails contrast as white-on-color text (1.34:1), so it needs the
   dark headerColor text used below instead. */
.cs-button-solid {
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 3rem;
    letter-spacing: 1.04px;
    word-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    padding: 0 2rem;
    background-color: var(--secondary);
    color: var(--headerColor);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
}

/* Hover: a darker shade of the button's own peach wipes in from the left.
   Text and arrow stay navy throughout -- --secondaryDark (#c6a97c) still
   gives navy text 5.26:1 contrast, so no colour flip is needed here. */
.cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--secondaryDark);
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
}

.cs-button-solid:hover:before {
    width: 100%;
}

/* The arrow icon asset is a white SVG; invert it dark to match the navy
   text, on both the peach background at rest and the darker peach on hover */
.cs-button-solid .cs-button-arrow {
    filter: invert(1);
}

/*-- -------------------------- -->
<---          Button 2          -->
<--- -------------------------- -*/

/* Site-wide secondary button -- Button 1 flipped. White fill, teal text and
   border. The border is what makes it read on a white background (e.g. a
   light-colored section), not just on the hero photo. Same box model as
   Button 1 (line-height, padding, min-width) so the two sit flush in a row. */
.cs-button-outline {
    font-family: 'Gotham', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: calc(3rem - 4px);
    letter-spacing: 1.04px;
    word-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    padding: 0 2rem;
    background-color: #fff;
    color: #223a4d;
    border: 2px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
    transition: color 0.3s, border-color 0.3s;
}

/* Hover: same peach-orange wipe used site-wide (Button 1, nav links, the
   toggle, card borders) rather than a sage fill -- text flips to navy,
   which keeps 4.84:1 contrast against the orange, same as Button 1. */
.cs-button-outline:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--secondaryDark);
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
}

.cs-button-outline:hover {
    color: var(--headerColor);
    border-color: var(--secondaryDark);
}

.cs-button-outline:hover:before {
    width: 100%;
}

/*-- -------------------------- -->
<---       Button Group         -->
<--- -------------------------- -*/

/* Lays two buttons inline wherever both are used together (e.g. the hero) */
.cs-button-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Mobile: keep a two-button group side by side rather than stacking.
   Buttons shrink to fit (smaller min-width/padding/font) instead of
   wrapping onto their own lines. */
@media only screen and (max-width: 47.9375rem) {
  .cs-button-group {
    flex-wrap: nowrap;
    gap: 0.625rem;
  }
  /* Explicit height (not line-height) so the two buttons match exactly --
     Button 2's 2px border would otherwise add 4px on top of whatever
     line-height gives it, making it thicker than Button 1. */
  .cs-button-group .cs-button-solid,
  .cs-button-group .cs-button-outline {
    min-width: 0;
    flex: 1 1 0;
    height: 3.25rem;
    padding: 0 0.75rem;
    line-height: 1.3em;
    font-size: 0.8125rem;
    white-space: normal;
    text-align: center;
    gap: 0.35rem;
  }
}

/* Higher specificity to beat nav.css's capitalize on dropdown links */
#cs-navigation .cs-drop-ul .cs-li-link.cs-drop-link {
    text-transform: none;
    font-weight: 600;
}

.cs-topper {
    font-family: 'Gotham', sans-serif;
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-family: 'Self Modern', serif;
    font-size: var(--headerFontSize);
    font-weight: 300;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-family: 'Gotham', sans-serif;
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}