@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;

    /* -- Client theme layer --------------------------------------------
       Everything below is what actually changes between client sites.
       The palette above and every rule in every section file was written
       against these tokens (or should be -- see THEMING.md), so a reskin
       is "edit this block," not "hunt through 8 files." Swap fonts by
       changing the two font tokens + their @font-face src paths at the
       top of this file; swap colour by changing the values below (keep
       the token names, since every section references them by name). */
    --headingFont: 'Self Modern', serif;
    --bodyFont: 'Gotham', sans-serif;

    /* Brand dark -- headings, nav text, dark UI on light backgrounds.
       Distinct from --headerColor above (an older near-black left over
       from the base template); most visible text actually uses --navy. */
    --navy: #223a4d;

    /* Warm accent used for eyebrows/text-links on white sections --
       distinct from --secondaryDark (the brighter orange used for
       buttons/hover fills) by design, not an inconsistency: this one is
       tuned for AA text contrast on white, that one for CTA fills. */
    --accentText: #cc7c46;
    --accentTextDark: #995d34;

    /* Warm off-white used behind the hero and Services */
    --cream: #f2ead5;

    /* Section-specific dark backgrounds (Book Consultation, Footer) --
       both currently a dark green/navy pairing; give a client its own
       pair here rather than editing book-consultation.css/footer.css
       directly. */
    --consultationBg: #344d3f;
    --footerBg: #233b4f;
}

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: var(--bodyFont);
}

/* 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: var(--headingFont);
    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: var(--bodyFont);
    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: var(--bodyFont);
    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: var(--navy);
    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: var(--bodyFont);
    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: var(--headingFont);
    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;
}

/* -- Heading emphasis treatments -------------------------------------
   The highlighted word inside a .cs-title (e.g. <span>deeper</span>) picks
   ONE of these, site-wide -- same "pick one" model as css/variants.css's
   layout options. Put the class directly on the <span>, not the section:
   this way every heading across the whole site stays in sync from a single
   edit instead of drifting per-section. See THEMING.md. */

/* Default -- two-layer rotated highlighter mark behind the word. Playful,
   warm; this was previously duplicated verbatim in 5 section stylesheets. */
.cs-emphasis-mark {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 0 0.2rem;
    white-space: nowrap;
}
.cs-emphasis-mark:before {
    content: "";
    position: absolute;
    left: -0.4rem;
    right: -0.2rem;
    bottom: -0.05rem;
    height: 25%;
    background: var(--secondary);
    opacity: 0.85;
    z-index: -2;
    border-radius: 4px 8px 4px 12px;
    clip-path: ellipse(60% 100% at 50% 0%);
    transform: rotate(-1deg);
}
.cs-emphasis-mark:after {
    content: "";
    position: absolute;
    left: -0.1rem;
    right: -0.5rem;
    bottom: 0.05rem;
    height: 38%;
    background: var(--secondary);
    opacity: 0.5;
    z-index: -1;
    border-radius: 6px 12px 4px 8px;
    clip-path: ellipse(55% 100% at 48% 0%);
    transform: rotate(0.5deg);
}

/* Quiet italic -- plain accent-colour italic, no background shape. Reads
   calmer and more literary; was previously a hero-only bespoke rule. */
.cs-emphasis-italic {
    color: var(--secondaryDark);
    font-style: italic;
}

/* Editorial underline -- a single confident underline in the accent
   colour, no fill. More assured/grown-up than the playful mark. */
.cs-emphasis-underline {
    text-decoration-line: underline;
    text-decoration-color: var(--accentText);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.15em;
}

/* Outline box -- a thin bracket around the word, no fill. Reads more
   clinical/modern than the other three. */
.cs-emphasis-box {
    display: inline-block;
    padding: 0 0.35em;
    border: 1.5px solid var(--accentText);
}

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