/* ==========================================================================
   YOST DESIGN TOKENS — VERSION 1.0

   Global design values for the Yost project.
   This file contains tokens only. No foundation classes or components.
   ========================================================================== */

:root {
    /* ==========================================================================
     PRIMITIVE COLORS
     ========================================================================== */

    --white: #ffffff;
    --black: #000000;

    /* Primary
     -------------------------------------------------------------------------- */

    --primary-50: #eff6fa;
    --primary-100: #d9edf7;
    --primary-200: #b0dbf2;
    --primary-300: #79c4ec;
    --primary-400: #2ea5e5;
    --primary-500: #065e8e;
    --primary-600: #07537c;
    --primary-700: #064465;
    --primary-800: #073650;
    --primary-900: #06293c;
    --primary-950: #041924;

    --primary-default: var(--primary-500);

    /* Secondary
     -------------------------------------------------------------------------- */

    --secondary-50: #faf2ef;
    --secondary-100: #f4e5de;
    --secondary-200: #e7c8ba;
    --secondary-300: #d9ab98;
    --secondary-400: #c9917c;
    --secondary-500: #b97862;
    --secondary-600: #a6624e;
    --secondary-700: #975745;
    --secondary-800: #884d3d;
    --secondary-900: #713e32;
    --secondary-950: #5b3127;

    --secondary-default: var(--secondary-600);

    /* Neutral
     -------------------------------------------------------------------------- */

    --neutral-50: #f7f9fa;
    --neutral-100: #edf1f3;
    --neutral-200: #dce3e7;
    --neutral-300: #c4d0d6;
    --neutral-400: #a5b5be;
    --neutral-500: #8498a4;
    --neutral-600: #697e8a;
    --neutral-700: #536670;
    --neutral-800: #3d4d56;
    --neutral-900: #28363d;
    --neutral-950: #172126;

    /* ==========================================================================
     SEMANTIC COLORS
     ========================================================================== */

    /* Backgrounds
     -------------------------------------------------------------------------- */

    --bg-dark: var(--neutral-950);
    --bg-light: var(--primary-50);
    --bg-light-alt: var(--secondary-100);

    --bg-primary: var(--primary-default);
    --bg-secondary: var(--secondary-default);

    /* Text
     -------------------------------------------------------------------------- */

    --text-dark: var(--neutral-800);
    --text-dark-alt: var(--neutral-950);
    --text-light: var(--neutral-50);

    --text-primary: var(--primary-default);
    --text-secondary: var(--secondary-default);

    /* Headings
     -------------------------------------------------------------------------- */

    --heading-dark: var(--neutral-950);
    --heading-light: var(--neutral-50);

    --heading-primary: var(--primary-default);
    --heading-secondary: var(--secondary-default);

    /* Links
     -------------------------------------------------------------------------- */

    /* Link colors
   -------------------------------------------------------------------------- */

    /* Primary / default link */

    --link-primary: var(--primary-default);
    --link-primary-hover: var(--primary-800);

    /* Dark link */

    --link-dark: var(--neutral-950);
    --link-dark-hover: var(--primary-default);

    /* Light link */

    --link-light: var(--white);
    --link-light-hover: var(--secondary-100);

    /* Secondary link */

    --link-secondary: var(--secondary-default);
    --link-secondary-hover: var(--secondary-800);

    --link-font-weight: 500;

    /* Borders
     -------------------------------------------------------------------------- */

    --border-dark: var(--neutral-600);
    --border-light: var(--neutral-100);
    --border-light-alt: var(--neutral-200);

    --border-primary: var(--primary-default);
    --border-secondary: var(--secondary-default);

    /* ==========================================================================
     SPACING — FIXED
     ========================================================================== */
    --container-gap: var(--space-xl);
    --space-none: 0;

    --space-4xs: 0.125rem; /* 2px */
    --space-3xs: 0.25rem; /* 4px */
    --space-2xs: 0.5rem; /* 8px */
    --space-xs: 0.75rem; /* 12px */
    --space-s: 1rem; /* 16px */
    --space-m: 1.5rem; /* 24px */
    --space-l: 2rem; /* 32px */
    --space-xl: 2.625rem; /* 42px */
    --space-2xl: 4rem; /* 64px */
    --space-3xl: 4.5rem; /* 72px */
    --space-4xl: 7.5rem; /* 120px */

    /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */

    --radius-0: 0;

    --radius-xs: 0.25rem; /* 4px */
    --radius-s: 0.375rem; /* 6px */
    --radius-m: 0.5rem; /* 8px */
    --radius-l: 1.125rem; /* 18px */
    --radius-xl: 1.5625rem; /* 25px */
    --radius-full: 999rem;

    /* Component radius aliases
     -------------------------------------------------------------------------- */

    --card-radius: var(--radius-xl);
    --image-radius: var(--radius-xl);

    /* ==========================================================================
     FONT FAMILIES
     ========================================================================== */

    --ff-primary: 'Manrope', sans-serif;
    --ff-secondary: 'Inter', sans-serif;
    --ff-accent: 'Source Serif 4', serif;

    /* ==========================================================================
     BODY TEXT SCALE
     ========================================================================== */

    --text-2xs: 0.75rem; /* 12px */
    --text-xs: 0.875rem; /* 14px */
    --text-s: 1rem; /* 16px */
    --text-m: 1.125rem; /* 18px */

    --text-l: clamp(1.125rem, calc(0.25vw + 1.05rem), 1.25rem);
    --text-xl: clamp(1.25rem, calc(0.25vw + 1.18rem), 1.375rem);
    --text-2xl: clamp(1.375rem, calc(0.25vw + 1.3rem), 1.5rem);

    /* ==========================================================================
     HEADING SCALE
     ========================================================================== */

    --display: clamp(2.25rem, calc(2.38vw + 1.54rem), 4rem);

    --h1: clamp(2.25rem, calc(1.63vw + 1.76rem), 3.0625rem);
    --h2: clamp(1.9375rem, calc(1vw + 1.64rem), 2.4375rem);
    --h3: clamp(1.5625rem, calc(0.75vw + 1.34rem), 1.9375rem);
    --h4: clamp(1.25rem, calc(0.63vw + 1.06rem), 1.5625rem);
    --h5: clamp(1.125rem, calc(0.5vw + 0.97rem), 1.375rem);
    --h6: 1.125rem;

    /* ==========================================================================
     LINE HEIGHTS
     ========================================================================== */

    --line-height-xs: 1;
    --line-height-s: 1.2;
    --line-height-m: 1.3;
    --line-height-l: 1.4;
    --line-height-xl: 1.7;

    /* ==========================================================================
     LAYOUT
     ========================================================================== */

    --min-screen-width: 480px;
    --max-screen-width: 1280px;

    --content-width: 80rem;

    --section-space-x: clamp(1.5rem, calc(2.25vw + 0.82rem), 2.63rem);

    /* ==========================================================================
     GRID
     ========================================================================== */

    --columns-1: repeat(1, minmax(0, 1fr));
    --columns-2: repeat(2, minmax(0, 1fr));
    --columns-3: repeat(3, minmax(0, 1fr));
    --columns-4: repeat(4, minmax(0, 1fr));
    --columns-5: repeat(5, minmax(0, 1fr));
    --columns-6: repeat(6, minmax(0, 1fr));
    --columns-7: repeat(7, minmax(0, 1fr));
    --columns-8: repeat(8, minmax(0, 1fr));

    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));

    /* ==========================================================================
     WIDTHS
     ========================================================================== */

    --full-width: 100%;

    --max-width-30: 30rem;
    --max-width-40: 40rem;
    --max-width-50: 50rem;
    --max-width-60: 60rem;

    /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

    --transition-global: all 0.3s ease-in-out;

    /* ==========================================================================
     SHADOWS
     ========================================================================== */

    --shadow-s: 0 1px 2px rgb(0 0 0 / 0.15);

    --shadow-m:
        0 2.826px 6.36px -2.12px rgb(24 39 75 / 0.12),
        0 4.24px 14.839px -1.413px rgb(24 39 75 / 0.12);

    --shadow-l: 0 5px 30px rgb(0 0 0 / 0.15);

    /* ==========================================================================
     GRADIENTS
     ========================================================================== */

    --gradient-trans-to-black: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 0.7) 100%
    );

    /* ==========================================================================
     BUTTONS
     ========================================================================== */

    /* Typography
     -------------------------------------------------------------------------- */

    --btn-font-family: var(--ff-primary);
    --btn-font-size: var(--text-m);
    --btn-font-size-small: var(--text-s);

    --btn-font-weight: 600;
    --btn-line-height: var(--line-height-xs);

    --btn-text-transform: capitalize;
    --btn-letter-spacing: 0;

    /* Spacing
     -------------------------------------------------------------------------- */

    --btn-gap: var(--space-2xs);

    --btn-padding: var(--space-s) var(--space-l);
    --btn-padding-small: var(--space-2xs) var(--space-m);

    /* Border & radius
     -------------------------------------------------------------------------- */

    --btn-border-width: 2px;

    --btn-radius: var(--radius-full);
    --btn-radius-small: var(--radius-full);

    /* Button colors
   -------------------------------------------------------------------------- */

    /* Primary button */

    --btn-bg: var(--primary-default);
    --btn-bg-hover: var(--primary-800);
    --btn-text: var(--white);

    /* Light button */

    --btn-light-bg: var(--secondary-100);
    --btn-light-bg-hover: var(--secondary-200);
    --btn-light-text: var(--secondary-800);
    --btn-light-text-hover: var(--secondary-800);

    /* Outline / Ghost button */

    --btn-outline-bg: color-mix(in srgb, var(--white) 10%, transparent);
    --btn-outline-bg-hover: var(--white);

    --btn-outline-text: var(--white);
    --btn-outline-text-hover: var(--primary-default);

    --btn-outline-border: var(--white);
    --btn-outline-border-hover: var(--white);

    /* Transition
     -------------------------------------------------------------------------- */

    --btn-transition: var(--transition-global);

    --divider-height: 4rem;
}

/* ==========================================================================
   YOST FOUNDATION — VERSION 1.0

   Shared global foundation for the Yost project.
   Includes base typography and reusable utility classes.
   Component implementations are intentionally kept separate.
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */

html,
body {
    font-family: var(--ff-secondary);
    color: var(--text-dark);
}

body {
    font-size: var(--text-m);
    line-height: var(--line-height-xl);
    font-weight: 400;
}

body:not(.brx-body) .wp-menu-buddy {
    display: none !important;
}

section {
    gap: var(--container-gap);
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ff-primary);
    color: var(--heading-primary);
    font-weight: 700;
    text-transform: capitalize;
}

/* H1 */

h1,
.h1 {
    font-size: var(--h1);
    line-height: var(--line-height-s);
    letter-spacing: 0.1px;
}

/* H2 */

h2,
.h2 {
    font-size: var(--h2);
    line-height: var(--line-height-m);
    letter-spacing: 0.1px;
}

/* H3 */

h3,
.h3 {
    font-size: var(--h3);
    line-height: var(--line-height-m);
}

/* H4 */

h4,
.h4 {
    font-size: var(--h4);
    line-height: var(--line-height-l);
}

/* H5 */

h5,
.h5 {
    font-size: var(--h5);
    line-height: var(--line-height-l);
}

/* H6 */

h6,
.h6 {
    font-size: var(--h6);
    line-height: var(--line-height-l);
}

/* Display */

.display {
    font-family: var(--ff-primary);
    font-size: var(--display);
    line-height: var(--line-height-s);
    font-weight: 700;
}

b,
strong {
    font-weight: 700;
    color: inherit;
}

a {
    transition: var(--transition-global);
}

img {
    max-width: 100%;
    height: auto;
}

code {
    background-color: var(--primary-100);
    color: #f211a6;
    font-family: ui-monospace, monospace;
    padding: var(--space-3xs);
    border-radius: var(--radius-xs);
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
}

.brxe-section {
    padding-top: var(--space-3xl);
    padding-right: var(--section-space-x);
    padding-bottom: var(--space-3xl);
    padding-left: var(--section-space-x);
    gap: var(--space-2xl);
    position: relative;
}
.brxe-container {
    gap: var(--space-xl);
}
.brxe-block {
    gap: var(--space-m);
}

.editor-styles-wrapper {
    a {
        text-decoration: underline;
        font-weight: 600;
    }
}

/* ==========================================================================
   2. UTILITIES
   ========================================================================== */
.grid-auto-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr));
    gap: var(--space-xl);
    align-items: stretch;
}
.grid-auto-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: var(--space-m);
    align-items: stretch;
}
.grid-3-2 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-xl);
    align-items: center;
    @media (max-width: 991px) {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   2.1 COLOR
   ========================================================================== */

/* Backgrounds
   -------------------------------------------------------------------------- */

.bg-dark {
    background-color: var(--bg-dark);
}

.bg-light {
    background-color: var(--bg-light);
}

.bg-light-alt {
    background-color: var(--bg-light-alt);
}

.bg-primary {
    background-color: var(--bg-primary);
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

.bg-white {
    background-color: var(--white);
}


/* Text
   -------------------------------------------------------------------------- */

.text-dark {
    color: var(--text-dark);
}

.text-dark-alt {
    color: var(--text-dark-alt);
}

.text-light {
    color: var(--text-light);
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

/* Headings
   -------------------------------------------------------------------------- */

.heading-dark {
    color: var(--heading-dark);
}

.heading-light {
    color: var(--heading-light);
}

.heading-primary {
    color: var(--heading-primary);
}

.heading-secondary {
    color: var(--heading-secondary);
}

/* Borders
   -------------------------------------------------------------------------- */

.border-dark {
    border-color: var(--border-dark);
}

.border-light {
    border-color: var(--border-light);
}

.border-light-alt {
    border-color: var(--border-light-alt);
}

.border-primary {
    border-color: var(--border-primary);
}

.border-secondary {
    border-color: var(--border-secondary);
}

/* Gradients
   -------------------------------------------------------------------------- */

.gradient-trans-to-black {
    background: var(--gradient-trans-to-black);
}

/* ==========================================================================
   2.2 TYPOGRAPHY
   ========================================================================== */

/* Font families
   -------------------------------------------------------------------------- */

.ff-primary {
    font-family: var(--ff-primary);
}

.ff-secondary {
    font-family: var(--ff-secondary);
}

.ff-accent {
    font-family: var(--ff-accent);
}

/* Text sizes
   -------------------------------------------------------------------------- */

.text-2xs {
    font-size: var(--text-2xs);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-s {
    font-size: var(--text-s);
}

.text-m {
    font-size: var(--text-m) !important;
}

.text-l {
    font-size: var(--text-l);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

/* Line heights
   -------------------------------------------------------------------------- */

.line-height-xs {
    line-height: var(--line-height-xs);
}

.line-height-s {
    line-height: var(--line-height-s);
}

.line-height-m {
    line-height: var(--line-height-m);
}

.line-height-l {
    line-height: var(--line-height-l);
}

.line-height-xl {
    line-height: var(--line-height-xl);
}

/* Text styles
   -------------------------------------------------------------------------- */

.italic {
    font-style: italic;
}

.normal {
    font-style: normal;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.underline {
    text-decoration: underline;
}

/* Text alignment
   -------------------------------------------------------------------------- */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ==========================================================================
   2.3 SPACING
   ========================================================================== */

/* Padding
   -------------------------------------------------------------------------- */
.section--big {
    padding-block: var(--space-4xl);
}

.padding-4xs {
    padding: var(--space-4xs);
}

.padding-3xs {
    padding: var(--space-3xs);
}

.padding-2xs {
    padding: var(--space-2xs);
}

.padding-xs {
    padding: var(--space-xs);
}

.padding-s {
    padding: var(--space-s);
}

.padding-m {
    padding: var(--space-m);
}

.padding-l {
    padding: var(--space-l);
}

.padding-xl {
    padding: var(--space-xl);
}

.padding-2xl {
    padding: var(--space-2xl);
}

.padding-3xl {
    padding: var(--space-3xl);
}

.padding-4xl {
    padding: var(--space-4xl);
}

/* Padding left
   -------------------------------------------------------------------------- */

.padding-left-4xs {
    padding-left: var(--space-4xs);
}

.padding-left-3xs {
    padding-left: var(--space-3xs);
}

.padding-left-2xs {
    padding-left: var(--space-2xs);
}

.padding-left-xs {
    padding-left: var(--space-xs);
}

.padding-left-s {
    padding-left: var(--space-s);
}

.padding-left-m {
    padding-left: var(--space-m);
}

.padding-left-l {
    padding-left: var(--space-l);
}

.padding-left-xl {
    padding-left: var(--space-xl);
}

.padding-left-2xl {
    padding-left: var(--space-2xl);
}

.padding-left-3xl {
    padding-left: var(--space-3xl);
}

.padding-left-4xl {
    padding-left: var(--space-4xl);
}

/* Padding right
   -------------------------------------------------------------------------- */

.padding-right-4xs {
    padding-right: var(--space-4xs);
}

.padding-right-3xs {
    padding-right: var(--space-3xs);
}

.padding-right-2xs {
    padding-right: var(--space-2xs);
}

.padding-right-xs {
    padding-right: var(--space-xs);
}

.padding-right-s {
    padding-right: var(--space-s);
}

.padding-right-m {
    padding-right: var(--space-m);
}

.padding-right-l {
    padding-right: var(--space-l);
}

.padding-right-xl {
    padding-right: var(--space-xl);
}

.padding-right-2xl {
    padding-right: var(--space-2xl);
}

.padding-right-3xl {
    padding-right: var(--space-3xl);
}

.padding-right-4xl {
    padding-right: var(--space-4xl);
}

/* Padding top
   -------------------------------------------------------------------------- */

.padding-top-4xs {
    padding-top: var(--space-4xs);
}

.padding-top-3xs {
    padding-top: var(--space-3xs);
}

.padding-top-2xs {
    padding-top: var(--space-2xs);
}

.padding-top-xs {
    padding-top: var(--space-xs);
}

.padding-top-s {
    padding-top: var(--space-s);
}

.padding-top-m {
    padding-top: var(--space-m);
}

.padding-top-l {
    padding-top: var(--space-l);
}

.padding-top-xl {
    padding-top: var(--space-xl);
}

.padding-top-2xl {
    padding-top: var(--space-2xl);
}

.padding-top-3xl {
    padding-top: var(--space-3xl);
}

.padding-top-4xl {
    padding-top: var(--space-4xl);
}

/* Padding bottom
   -------------------------------------------------------------------------- */
.padding-bottom-none {
    padding-bottom: 0;
}
.padding-bottom-4xs {
    padding-bottom: var(--space-4xs);
}

.padding-bottom-3xs {
    padding-bottom: var(--space-3xs);
}

.padding-bottom-2xs {
    padding-bottom: var(--space-2xs);
}

.padding-bottom-xs {
    padding-bottom: var(--space-xs);
}

.padding-bottom-s {
    padding-bottom: var(--space-s);
}

.padding-bottom-m {
    padding-bottom: var(--space-m);
}

.padding-bottom-l {
    padding-bottom: var(--space-l);
}

.padding-bottom-xl {
    padding-bottom: var(--space-xl);
}

.padding-bottom-2xl {
    padding-bottom: var(--space-2xl);
}

.padding-bottom-3xl {
    padding-bottom: var(--space-3xl);
}

.padding-bottom-4xl {
    padding-bottom: var(--space-4xl);
}

/* Padding horizontal
   -------------------------------------------------------------------------- */

.padding-horizontal-4xs {
    padding-left: var(--space-4xs);
    padding-right: var(--space-4xs);
}

.padding-horizontal-3xs {
    padding-left: var(--space-3xs);
    padding-right: var(--space-3xs);
}

.padding-horizontal-2xs {
    padding-left: var(--space-2xs);
    padding-right: var(--space-2xs);
}

.padding-horizontal-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
}

.padding-horizontal-s {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

.padding-horizontal-m {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.padding-horizontal-l {
    padding-left: var(--space-l);
    padding-right: var(--space-l);
}

.padding-horizontal-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

.padding-horizontal-2xl {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
}

.padding-horizontal-3xl {
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
}

.padding-horizontal-4xl {
    padding-left: var(--space-4xl);
    padding-right: var(--space-4xl);
}

/* Padding vertical
   -------------------------------------------------------------------------- */

.padding-vertical-4xs {
    padding-top: var(--space-4xs);
    padding-bottom: var(--space-4xs);
}

.padding-vertical-3xs {
    padding-top: var(--space-3xs);
    padding-bottom: var(--space-3xs);
}

.padding-vertical-2xs {
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
}

.padding-vertical-xs {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}

.padding-vertical-s {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
}

.padding-vertical-m {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
}

.padding-vertical-l {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}

.padding-vertical-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.padding-vertical-2xl {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.padding-vertical-3xl {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.padding-vertical-4xl {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

/* Margin
   -------------------------------------------------------------------------- */

.margin-4xs {
    margin: var(--space-4xs);
}

.margin-3xs {
    margin: var(--space-3xs);
}

.margin-2xs {
    margin: var(--space-2xs);
}

.margin-xs {
    margin: var(--space-xs);
}

.margin-s {
    margin: var(--space-s);
}

.margin-m {
    margin: var(--space-m);
}

.margin-l {
    margin: var(--space-l);
}

.margin-xl {
    margin: var(--space-xl);
}

.margin-2xl {
    margin: var(--space-2xl);
}

.margin-3xl {
    margin: var(--space-3xl);
}

.margin-4xl {
    margin: var(--space-4xl);
}

/* Margin left
   -------------------------------------------------------------------------- */

.margin-left-4xs {
    margin-left: var(--space-4xs);
}

.margin-left-3xs {
    margin-left: var(--space-3xs);
}

.margin-left-2xs {
    margin-left: var(--space-2xs);
}

.margin-left-xs {
    margin-left: var(--space-xs);
}

.margin-left-s {
    margin-left: var(--space-s);
}

.margin-left-m {
    margin-left: var(--space-m);
}

.margin-left-l {
    margin-left: var(--space-l);
}

.margin-left-xl {
    margin-left: var(--space-xl);
}

.margin-left-2xl {
    margin-left: var(--space-2xl);
}

.margin-left-3xl {
    margin-left: var(--space-3xl);
}

.margin-left-4xl {
    margin-left: var(--space-4xl);
}

/* Margin right
   -------------------------------------------------------------------------- */

.margin-right-4xs {
    margin-right: var(--space-4xs);
}

.margin-right-3xs {
    margin-right: var(--space-3xs);
}

.margin-right-2xs {
    margin-right: var(--space-2xs);
}

.margin-right-xs {
    margin-right: var(--space-xs);
}

.margin-right-s {
    margin-right: var(--space-s);
}

.margin-right-m {
    margin-right: var(--space-m);
}

.margin-right-l {
    margin-right: var(--space-l);
}

.margin-right-xl {
    margin-right: var(--space-xl);
}

.margin-right-2xl {
    margin-right: var(--space-2xl);
}

.margin-right-3xl {
    margin-right: var(--space-3xl);
}

.margin-right-4xl {
    margin-right: var(--space-4xl);
}

/* Margin top
   -------------------------------------------------------------------------- */

.margin-top-4xs {
    margin-top: var(--space-4xs);
}

.margin-top-3xs {
    margin-top: var(--space-3xs);
}

.margin-top-2xs {
    margin-top: var(--space-2xs);
}

.margin-top-xs {
    margin-top: var(--space-xs);
}

.margin-top-s {
    margin-top: var(--space-s);
}

.margin-top-m {
    margin-top: var(--space-m);
}

.margin-top-l {
    margin-top: var(--space-l);
}

.margin-top-xl {
    margin-top: var(--space-xl);
}

.margin-top-2xl {
    margin-top: var(--space-2xl);
}

.margin-top-3xl {
    margin-top: var(--space-3xl);
}

.margin-top-4xl {
    margin-top: var(--space-4xl);
}

/* Margin bottom
   -------------------------------------------------------------------------- */

.margin-bottom-4xs {
    margin-bottom: var(--space-4xs);
}

.margin-bottom-3xs {
    margin-bottom: var(--space-3xs);
}

.margin-bottom-2xs {
    margin-bottom: var(--space-2xs);
}

.margin-bottom-xs {
    margin-bottom: var(--space-xs);
}

.margin-bottom-s {
    margin-bottom: var(--space-s);
}

.margin-bottom-m {
    margin-bottom: var(--space-m);
}

.margin-bottom-l {
    margin-bottom: var(--space-l);
}

.margin-bottom-xl {
    margin-bottom: var(--space-xl);
}

.margin-bottom-2xl {
    margin-bottom: var(--space-2xl);
}

.margin-bottom-3xl {
    margin-bottom: var(--space-3xl);
}

.margin-bottom-4xl {
    margin-bottom: var(--space-4xl);
}

/* Margin horizontal
   -------------------------------------------------------------------------- */

.margin-horizontal-4xs {
    margin-left: var(--space-4xs);
    margin-right: var(--space-4xs);
}

.margin-horizontal-3xs {
    margin-left: var(--space-3xs);
    margin-right: var(--space-3xs);
}

.margin-horizontal-2xs {
    margin-left: var(--space-2xs);
    margin-right: var(--space-2xs);
}

.margin-horizontal-xs {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
}

.margin-horizontal-s {
    margin-left: var(--space-s);
    margin-right: var(--space-s);
}

.margin-horizontal-m {
    margin-left: var(--space-m);
    margin-right: var(--space-m);
}

.margin-horizontal-l {
    margin-left: var(--space-l);
    margin-right: var(--space-l);
}

.margin-horizontal-xl {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);
}

.margin-horizontal-2xl {
    margin-left: var(--space-2xl);
    margin-right: var(--space-2xl);
}

.margin-horizontal-3xl {
    margin-left: var(--space-3xl);
    margin-right: var(--space-3xl);
}

.margin-horizontal-4xl {
    margin-left: var(--space-4xl);
    margin-right: var(--space-4xl);
}

/* Margin vertical
   -------------------------------------------------------------------------- */

.margin-vertical-4xs {
    margin-top: var(--space-4xs);
    margin-bottom: var(--space-4xs);
}

.margin-vertical-3xs {
    margin-top: var(--space-3xs);
    margin-bottom: var(--space-3xs);
}

.margin-vertical-2xs {
    margin-top: var(--space-2xs);
    margin-bottom: var(--space-2xs);
}

.margin-vertical-xs {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.margin-vertical-s {
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
}

.margin-vertical-m {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
}

.margin-vertical-l {
    margin-top: var(--space-l);
    margin-bottom: var(--space-l);
}

.margin-vertical-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.margin-vertical-2xl {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.margin-vertical-3xl {
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.margin-vertical-4xl {
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-4xl);
}

/* Gap
   -------------------------------------------------------------------------- */

.gap-none {
    gap: 0;
}
.gap-4xs {
    gap: var(--space-4xs);
}

.gap-3xs {
    gap: var(--space-3xs);
}

.gap-2xs {
    gap: var(--space-2xs);
}

.gap-xs {
    gap: var(--space-xs);
}

.gap-s {
    gap: var(--space-s);
}

.gap-m {
    gap: var(--space-m);
}

.gap-l {
    gap: var(--space-l);
}

.gap-xl {
    gap: var(--space-xl);
}

.gap-2xl {
    gap: var(--space-2xl);
}

.gap-3xl {
    gap: var(--space-3xl);
}

.gap-4xl {
    gap: var(--space-4xl);
}

/* Auto margins
   -------------------------------------------------------------------------- */

.margin-top-auto {
    margin-top: auto;
}

.margin-bottom-auto {
    margin-bottom: auto;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-right-auto {
    margin-right: auto;
    margin-left: 0;
}

.margin-horizontal-auto {
    margin-left: auto;
    margin-right: auto;
}

.margin-vertical-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* Margin resets
   -------------------------------------------------------------------------- */

.margin-0 p {
    margin: 0;
}

.margin-top-0 {
    margin-top: 0;
}

/* ==========================================================================
   2.4 GRID & FLEX
   ========================================================================== */

/* Grid
   -------------------------------------------------------------------------- */

.row {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
}

.grid-1 {
    display: grid;
    grid-auto-flow: row;
    justify-items: start;
    align-content: start;
}

.grid-2 {
    display: grid;
    grid-template-columns: var(--grid-2);
}

.grid-3 {
    display: grid;
    grid-template-columns: var(--grid-3);
}

.grid-4 {
    display: grid;
    grid-template-columns: var(--grid-4);
}

.grid-5 {
    display: grid;
    grid-template-columns: var(--grid-5);
}

.grid-6 {
    display: grid;
    grid-template-columns: var(--grid-6);
}

.grid-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* Grid ratios
   -------------------------------------------------------------------------- */

.grid-3-1 {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.grid-1-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.grid-1-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.grid-2-1 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* Auto-fit columns
   -------------------------------------------------------------------------- */

.col-min-5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr));
}

.col-min-10 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.col-min-20 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.col-min-30 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
}

/* Flex
   -------------------------------------------------------------------------- */

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-no-wrap {
    flex-wrap: nowrap;
}

/* Alignment
   -------------------------------------------------------------------------- */

.items-left {
    justify-items: start;
}

.content-left {
    justify-content: start;
}

.items-center {
    justify-items: center;
}

.content-center {
    justify-content: center;
}

.items-right {
    justify-items: end;
}

.content-right {
    justify-content: end;
}

.items-top {
    align-items: start;
}

.content-top {
    align-content: start;
}

.items-middle {
    align-items: center;
}

.content-middle {
    align-content: center;
}

.items-bottom {
    align-items: end;
}

.content-bottom {
    align-content: end;
}

.items-stretch {
    align-items: stretch;
}

.content-stretch {
    justify-content: stretch;
}

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

/* Self alignment
   -------------------------------------------------------------------------- */

.self-left {
    margin-right: auto;
    place-self: start;
}

.self-center {
    margin-left: auto;
    margin-right: auto;
    place-self: center;
}

.self-right {
    margin-left: auto;
    place-self: end;
}

.self-top {
    margin-bottom: auto;
    align-self: start;
}

.self-middle {
    margin-top: auto;
    margin-bottom: auto;
    align-self: center;
}

.self-bottom {
    margin-top: auto;
    align-self: end;
}

.self-stretch {
    align-self: stretch;
}

/* Responsive grid overrides
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .col-1--on-xl {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .row--on-xl {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }

    .col-2--on-xl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .col-3--on-xl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .col-4--on-xl {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .col-5--on-xl {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .col-6--on-xl {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .col-1--on-l {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .row--on-l {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }

    .col-2--on-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .col-3--on-l {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .col-4--on-l {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .col-1--on-m {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .row--on-m {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }

    .col-2--on-m {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .col-3--on-m {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .col-1--on-s {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }

    .row--on-s {
        grid-template-columns: unset;
        grid-auto-flow: column;
    }

    .col-2--on-s {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   2.5 SIZING & VISUAL HELPERS
   ========================================================================== */

/* Width & height
   -------------------------------------------------------------------------- */

.max-site-width {
    max-width: 140rem;
    width: 100%;
}

.full-width {
    width: var(--full-width);
}

.auto-width {
    width: auto;
}

.full-height {
    height: 100%;
}

.auto-height {
    height: auto;
}

.max-width-140 {
    max-width: 140rem;
}

.max-width-130 {
    max-width: 130rem;
}

.max-width-120 {
    max-width: 120rem;
}

.max-width-110 {
    max-width: 110rem;
}

.max-width-100 {
    max-width: 100rem;
}

.max-width-90 {
    max-width: 90rem;
}

.max-width-80 {
    max-width: 80rem;
}

.max-width-70 {
    max-width: 70rem;
}

.max-width-60 {
    max-width: var(--max-width-60);
}

.max-width-50 {
    max-width: var(--max-width-50);
}

.max-width-40 {
    max-width: var(--max-width-40);
}

.max-width-30 {
    max-width: var(--max-width-30);
}

.max-width-20 {
    max-width: 20rem;
}

.max-width-10 {
    max-width: 10rem;
}

.height-20 {
    height: 20rem;
}

/* Radius
   -------------------------------------------------------------------------- */

.radius-xs {
    border-radius: var(--radius-xs);
}

.radius-s {
    border-radius: var(--radius-s);
}

.radius-m {
    border-radius: var(--radius-m);
}

.radius-l {
    border-radius: var(--radius-l);
}

.radius-xl {
    border-radius: var(--radius-xl);
}

.radius-full {
    border-radius: var(--radius-full);
}

.radius-img {
    border-radius: var(--image-radius);
}

/* Hover
   -------------------------------------------------------------------------- */

.hover-zoom {
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 0.3);
}

@media (hover: hover) {
    .hover-zoom:hover {
        transform: scale(1.05);
    }
}

.hover-opacity-80 {
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    .hover-opacity-80:hover {
        opacity: 0.8;
    }
}

/* Shadows
   -------------------------------------------------------------------------- */

.shadow-s {
    box-shadow: var(--shadow-s);
}

.shadow-m {
    box-shadow: var(--shadow-m);
}

.shadow-l {
    box-shadow: var(--shadow-l);
}

/* Object fit
   -------------------------------------------------------------------------- */

.fit-contain {
    object-fit: contain;
}

.fit-cover {
    object-fit: cover;
}

.fit-fill {
    object-fit: fill;
}

/* Filters
   -------------------------------------------------------------------------- */

.grayscale {
    filter: grayscale(1);
}

/* Misc
   -------------------------------------------------------------------------- */

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

.list-none {
    list-style-type: none;
}

.white-space-nowrap {
    white-space: nowrap;
}

.transition-global {
    transition: var(--transition-global);
}

/* Positioning
   -------------------------------------------------------------------------- */

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    inset: 0;
}

.bottom-0 {
    bottom: 0;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

/* Cursor
   -------------------------------------------------------------------------- */

.pointer {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}

.cursor-auto {
    cursor: auto;
}

.no-pointer-events {
    pointer-events: none;
}

/* ==========================================================================
   2.6 BACKGROUND / MEDIA POSITION
   ========================================================================== */

[data-bg-position='Left Top'] {
    object-position: 20% 20%;
}

[data-bg-position='Left Center'] {
    object-position: 20% 40%;
}

[data-bg-position='Left Bottom'] {
    object-position: 20% 80%;
}

[data-bg-position='Center Top'] {
    object-position: 50% 20%;
}

[data-bg-position='Center Center'] {
    object-position: 50% 40%;
}

[data-bg-position='Center Bottom'] {
    object-position: 50% 80%;
}

[data-bg-position='Right Top'] {
    object-position: 80% 20%;
}

[data-bg-position='Right Center'] {
    object-position: 80% 40%;
}

[data-bg-position='Right Bottom'] {
    object-position: 80% 80%;
}

[data-bg-position='FarRight Bottom'] {
    object-position: 100% 80%;
}

/* ==========================================================================
   COMPONENT: BUTTON
   ========================================================================== */

/* Base button
   -------------------------------------------------------------------------- */

.btn,
.wp-block-button__link,
.nf-form-layout .nf-form-content .nf-field-element input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--btn-gap);
    padding: var(--btn-padding);

    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);

    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: none;

    white-space: normal;
    text-align: center;
    max-width: 100%;

    color: var(--btn-text);
    background-color: var(--btn-bg);

    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-radius);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

    appearance: none;
    -webkit-appearance: none;
}

@media (hover: hover) {
    .btn:hover,
    .wp-block-button__link:hover,
    .nf-form-layout
        .nf-form-content
        .nf-field-element
        input[type='submit']:hover {
        color: var(--btn-text);
        background-color: var(--btn-bg-hover);
    }
}

/* Light
   -------------------------------------------------------------------------- */

.btn--light,
.nf-form-layout .nf-form-content .nf-field-element input[type='submit'] {
    color: var(--btn-light-text);
    background-color: var(--btn-light-bg);
    border-color: var(--btn-light-bg);
}

@media (hover: hover) {
    .btn--light:hover,
    .nf-form-layout
        .nf-form-content
        .nf-field-element
        input[type='submit']:hover {
        color: var(--btn-light-text-hover);
        background-color: var(--btn-light-bg-hover);
        border-color: var(--btn-light-bg-hover);
    }
}

/* Outline / Ghost
   -------------------------------------------------------------------------- */

.btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--btn-outline-text);
    background-color: var(--btn-outline-bg);
    border-color: var(--btn-outline-border);
}

@media (hover: hover) {
    .btn--outline:hover,
    .wp-block-button.is-style-outline .wp-block-button__link:hover {
        color: var(--btn-outline-text-hover);
        background-color: var(--btn-outline-bg-hover);
        border-color: var(--btn-outline-border-hover);
    }
}

/* Small
   -------------------------------------------------------------------------- */

.btn--small {
    padding: var(--btn-padding-small);
    font-size: var(--btn-font-size-small);
    border-radius: var(--btn-radius-small);
}

/* Full width
   -------------------------------------------------------------------------- */

.btn--full {
    display: flex;
    width: 100%;
}

/* Button icon
   -------------------------------------------------------------------------- */

.btn .icon,
.wp-block-button__link .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    flex-shrink: 0;

    color: currentColor;
    line-height: 1;
}

/* Focus
   -------------------------------------------------------------------------- */

.btn:focus-visible,
.wp-block-button__link:focus-visible,
.nf-form-layout
    .nf-form-content
    .nf-field-element
    input[type='submit']:focus-visible {
    outline: 2px solid var(--primary-default);
    outline-offset: 3px;
}

/* Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .wp-block-button__link,
    .nf-form-layout .nf-form-content .nf-field-element input[type='submit'] {
        transition: none;
    }
}

/* ==========================================================================
   COMPONENT: TEXT BUTTON
   ========================================================================== */

.btn-text {
    display: inline-flex;
    align-items: center;

    gap: var(--btn-gap);
    padding: 0;

    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);

    text-transform: var(--btn-text-transform);
    letter-spacing: var(--btn-letter-spacing);
    text-decoration: none;

    color: var(--primary-default);
    background: transparent;
    border: 0;

    cursor: pointer;

    transition: color 0.2s ease;
}

@media (hover: hover) {
    .btn-text:hover {
        color: var(--primary-800);
    }
}

/* Text button icon
   -------------------------------------------------------------------------- */

.btn-text .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    flex-shrink: 0;

    color: currentColor;
    line-height: 1;
}

/* Text button variants
   -------------------------------------------------------------------------- */

.btn-text--primary {
    color: var(--primary-default);
}

.btn-text--secondary {
    color: var(--secondary-default);
}

.btn-text--light {
    color: var(--white);
}

@media (hover: hover) {
    .btn-text--secondary:hover {
        color: var(--secondary-800);
    }

    .btn-text--light:hover {
        color: var(--primary-50);
    }
}

/* ==========================================================================
   COMPONENT: LINK
   ========================================================================== */

/* Base / Primary link
   -------------------------------------------------------------------------- */

.link a,
.inner-content a:not(.wp-block-button__link):not(.btn) {
    font-weight: var(--link-font-weight);
    color: var(--link-secondary);
    text-decoration: underline;
    transition: var(--transition-global);
}

.link a:hover,
.inner-content a:not(.wp-block-button__link):not(.btn):hover {
    color: var(--link-secondary-hover);
}

/* Dark
   -------------------------------------------------------------------------- */

.link--dark a {
    color: var(--link-dark);
}

.link--dark a:hover {
    color: var(--link-dark-hover);
}

/* Light
   -------------------------------------------------------------------------- */

.link--light a {
    color: var(--link-light);
}

.link--light a:hover {
    color: var(--link-light-hover);
}

/* Primary
   -------------------------------------------------------------------------- */

.link--primary a {
    color: var(--link-primary);
}

.link--primary a:hover {
    color: var(--link-primary-hover);
}

/* Secondary
   -------------------------------------------------------------------------- */

.link--secondary a {
    color: var(--link-secondary);
}

.link--secondary a:hover {
    color: var(--link-secondary-hover);
}

/* Focus
   -------------------------------------------------------------------------- */

.link a:focus-visible,
.inner-content a:not(.wp-block-button__link):focus-visible {
    outline: 2px solid var(--primary-default);
    outline-offset: 2px;
}

/* ==========================================================================
   COMPONENT: ICON BADGE
   ========================================================================== */
.social-icons-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
}
.icon-badge {
    --icon-badge-size: 2.5rem;
    --icon-badge-icon-size: 1.25rem;

    --icon-badge-bg: var(--secondary-default);
    --icon-badge-color: var(--white);
    --icon-badge-border: var(--secondary-default);
    --icon-badge-radius: var(--radius-full);

    inline-size: var(--icon-badge-size);
    block-size: var(--icon-badge-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: var(--icon-badge-icon-size);
    line-height: 1;

    color: var(--icon-badge-color);
    background-color: var(--icon-badge-bg);

    border: 1px solid var(--icon-badge-border);
    border-radius: var(--icon-badge-radius);
    svg {
  height: var(--icon-badge-icon-size);
}
    &:hover {
        --icon-badge-bg: var(--secondary-50);
        --icon-badge-border: var(--secondary-800);
        --icon-badge-color: var(--secondary-800);
    }
    &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 0.25rem;
}
}

/* Icon font
   -------------------------------------------------------------------------- */

.icon-badge i {
    font-size: inherit;
    line-height: 1;
}

/* SVG source
   -------------------------------------------------------------------------- */

svg.icon-badge {
    padding: calc((var(--icon-badge-size) - var(--icon-badge-icon-size)) / 2);

    fill: currentColor;
}

/* Small
   -------------------------------------------------------------------------- */

.icon-badge--small {
    --icon-badge-size: 2rem;
    --icon-badge-icon-size: 1rem;
}

/* Large
   -------------------------------------------------------------------------- */

.icon-badge--large {
    --icon-badge-size: 3.125rem;
    --icon-badge-icon-size: 1.5rem;
}

/* Interactive
   -------------------------------------------------------------------------- */

.icon-badge--interactive {
    cursor: pointer;
    transition: var(--transition-global);
}

@media (hover: hover) {
    .icon-badge--interactive:hover {
        --icon-badge-bg: var(--secondary-50);
        --icon-badge-border: var(--secondary-800);
        --icon-badge-color: var(--secondary-800);
    }
}

.icon-badge--interactive:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 0.25rem;
}

/* ==========================================================================
   COMPONENT: EYEBROW
   ========================================================================== */

.eyebrow {
    --eyebrow-color: var(--secondary-default);
    --eyebrow-line-color: var(--secondary-default);

    --eyebrow-line-width: 1.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: var(--space-2xs);

    font-family: var(--ff-accent);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;

    color: var(--eyebrow-color);
    text-align: left;
    text-transform: capitalize;
}

/* Leading line
   -------------------------------------------------------------------------- */

.eyebrow::before {
    content: '';

    width: var(--eyebrow-line-width);
    height: 1px;

    flex-shrink: 0;

    background-color: var(--eyebrow-line-color);
}

/* Center modifier
   -------------------------------------------------------------------------- */

.eyebrow--center {
    justify-content: center;
    text-align: center;
}

.eyebrow--center::after {
    content: '';

    width: var(--eyebrow-line-width);
    height: 1px;

    flex-shrink: 0;

    background-color: var(--eyebrow-line-color);
}

/* Light
   -------------------------------------------------------------------------- */

.eyebrow--light {
    --eyebrow-color: var(--white);
    --eyebrow-line-color: var(--white);
}

/* Dark
   -------------------------------------------------------------------------- */

.eyebrow--dark {
    --eyebrow-color: var(--text-dark-alt);
    --eyebrow-line-color: var(--secondary-default);
}
/* ==========================================================================
   COMPONENT: CONTACT ITEM
   ========================================================================== */

.contact-item {
    --contact-item-gap: var(--space-2xs);
    --contact-item-icon-size: 1.25em;
    --contact-item-align: center;
    --contact-item-icon-nudge: 0;

    display: flex;
    flex-direction: row;
    align-items: var(--contact-item-align);
    gap: var(--contact-item-gap);

    color: var(--text-dark-alt);
    font-weight: 400;
    text-decoration: none;

    transition: var(--transition-global);
}

/* Icon
   -------------------------------------------------------------------------- */

.contact-item__icon {
    flex-shrink: 0;

    font-size: var(--contact-item-icon-size);
    line-height: 1;

    color: var(--secondary-default);

    margin-block-start: var(--contact-item-icon-nudge);
}

.contact-item__icon svg,
svg.contact-item__icon {
    inline-size: var(--contact-item-icon-size);
    block-size: auto;

    color: currentColor;
}

/* Linked contact item
   -------------------------------------------------------------------------- */

@media (hover: hover) {
    a.contact-item:hover {
        color: var(--text-dark);
    }
}

/* Multiline
   -------------------------------------------------------------------------- */

.contact-item--multiline {
    --contact-item-align: flex-start;
    --contact-item-icon-nudge: 0.2em;
}

/* Light
   -------------------------------------------------------------------------- */

.contact-item--light {
    color: var(--white);
}

.contact-item--light .contact-item__icon {
    color: var(--secondary-300);
}

@media (hover: hover) {
    a.contact-item--light:hover {
        color: var(--secondary-100);
    }
}

/* Secondary
   -------------------------------------------------------------------------- */

.contact-item--secondary {
    color: var(--secondary-default);
}

.contact-item--secondary .contact-item__icon {
    color: var(--secondary-default);
}

@media (hover: hover) {
    a.contact-item--secondary:hover {
        color: var(--secondary-800);
    }
}

/* Focus
   -------------------------------------------------------------------------- */

a.contact-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
/* ==========================================================================
   COMPONENT: PHONE SHORTCODE
   ========================================================================== */

.phone-shortcode {
    --phone-color: var(--link-primary);
    --phone-hover-color: var(--link-primary-hover);
}

.phone-shortcode a {
    font-weight: var(--link-font-weight);
    color: var(--phone-color);
    text-decoration: underline;

    transition: var(--transition-global);
}

@media (hover: hover) {
    .phone-shortcode a:hover {
        color: var(--phone-hover-color);
    }
}

/* Light
   -------------------------------------------------------------------------- */

.phone-shortcode--light {
    --phone-color: var(--link-light);
    --phone-hover-color: var(--link-light-hover);
}

/* Secondary
   -------------------------------------------------------------------------- */

.phone-shortcode--secondary {
    --phone-color: var(--link-secondary);
    --phone-hover-color: var(--link-secondary-hover);
}

/* ==========================================================================
   COMPONENT: ALT SECTION
   ========================================================================== */

.alt-section {
    --gap: var(--space-xl);

    --img-ratio: 1 / 1;
    --img-min-h: 16rem;
    --img-max-h: 35rem;
    --img-radius: var(--image-radius);
    --img-pos: 50% 50%;

    background: none;
}

.alt-section__container {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-areas: 'img content';

    gap: var(--gap);

    align-items: start;
}

.alt-section__img-container {
    grid-area: img;

    width: 100%;
    max-width: 100%;

    aspect-ratio: var(--img-ratio);
    min-height: var(--img-min-h);
    max-height: var(--img-max-h);

    overflow: hidden;
    border-radius: var(--img-radius);
}

.alt-section__img-container :is(img, picture img) {
    width: 100%;
    height: 100%;
    max-width: 100%;

    display: block;

    object-fit: cover;
    object-position: var(--img-pos);
}

.alt-section__content {
    grid-area: content;
}

/* Image right
   -------------------------------------------------------------------------- */

.alt-section--img-right .alt-section__container {
    grid-template-areas: 'content img';
}

/* Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .alt-section {
        --gap: var(--space-m);

        --img-ratio: 3 / 4;
        --img-min-h: 14rem;
        --img-max-h: 25rem;
    }

    .alt-section__container,
    .alt-section--img-right .alt-section__container {
        grid-template-columns: 1fr;

        grid-template-areas:
            'img'
            'content';
    }

    .alt-section__img-container {
        justify-self: stretch;
    }
}

/* ==========================================================================
   COMPONENT: SPLIT SECTION
   ========================================================================== */

.split-section {
    --split-gap: var(--space-l);
    --split-pad-y: var(--space-xl);

    --split-img-width: 50vw;
    --split-img-pos: 50% 50%;

    --split-stack-gap: var(--space-l);
    --split-img-radius: var(--image-radius);

    --split-img-ratio: 3 / 4;
    --split-img-max-h: 25rem;

    position: relative;
    overflow: hidden;

    background: var(--bg-light) center / cover no-repeat;
}

.split-section__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-gap);
    align-items: stretch;

    padding-block: var(--split-pad-y);
}

.split-section__content {
    grid-column: 2;

    position: relative;
    z-index: 1;

    padding-left: var(--split-gap);
}

/* Image right
   -------------------------------------------------------------------------- */

.split-section--img-right .split-section__content {
    grid-column: 1;

    padding-left: 0;
    padding-right: var(--split-gap);
}

.split-section__img-container {
    position: absolute;
    inset: 0 auto 0 0;

    width: var(--split-img-width);

    overflow: hidden;
    z-index: 0;
}

.split-section--img-right .split-section__img-container {
    inset: 0 0 0 auto;
}

.split-section__img-container img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: var(--split-img-pos);
}

/* Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .split-section {
        --split-gap: var(--space-l);
        --split-pad-y: var(--space-l);

        --split-stack-gap: var(--space-m);

        --split-img-ratio: 4 / 3;
        --split-img-max-h: 25rem;
    }

    .split-section__container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .split-section__content,
    .split-section--img-right .split-section__content {
        grid-column: 1;
        padding: 0;
    }

    .split-section__img-container,
    .split-section--img-right .split-section__img-container {
        position: relative;
        inset: auto;

        width: 100%;

        aspect-ratio: var(--split-img-ratio);
        max-height: var(--split-img-max-h);

        margin-bottom: var(--split-stack-gap);

        overflow: hidden;
        border-radius: var(--split-img-radius);
    }
}

/* Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .split-section {
        --split-img-ratio: 3 / 4;
        --split-img-max-h: 25rem;

        --split-stack-gap: var(--space-l);
    }
}

@media (max-width: 479px) {
    .split-section {
        --split-img-max-h: 18rem;
    }
}

/* ==========================================================================
   COMPONENT: CARD MEDIA
   ========================================================================== */

.card-media {
    --card-media-bg: var(--bg-light);
    --card-media-border: var(--border-light-alt);

    --card-media-radius: var(--card-radius);
    --card-media-padding: var(--space-m);
    --card-media-gap: var(--space-s);

    --card-media-img-ratio: 4 / 3;
    --card-media-img-pos: 50% 50%;

    width: 100%;

    background-color: var(--card-media-bg);

    border: 1px solid var(--card-media-border);
    border-radius: var(--card-media-radius);

    overflow: hidden;
}

/* Layout
   -------------------------------------------------------------------------- */

/*
   Increased selector specificity is intentional.

   External component CSS can lose layout declarations against Bricks
   builder styles. This component-local specificity increase keeps the
   intended Flex layout authoritative without using .brxe-* selectors.
*/

.card-media.card-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Media
   -------------------------------------------------------------------------- */

.card-media__media {
    position: relative;

    width: 100%;
    aspect-ratio: var(--card-media-img-ratio);

    overflow: hidden;
}

.card-media__img,
.card-media__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: var(--card-media-img-pos);
}

/* Content
   -------------------------------------------------------------------------- */

.card-media .card-media__content {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    flex-grow: 1;

    gap: var(--card-media-gap);
    padding: var(--card-media-padding);

    background-color: var(--card-media-bg);
}

/* Heading
   -------------------------------------------------------------------------- */

.card-media__heading {
    margin: 0;
    margin-block: 0;

    font-size: var(--h5);
    text-transform: capitalize;
    color: var(--heading-dark);
    text-align: left;
}

/* Body
   -------------------------------------------------------------------------- */

.card-media .card-media__body {
    width: 100%;

    display: flex;
    flex-direction: column;

    flex-grow: 1;

    font-size: var(--text-s);
    color: var(--text-dark);
    text-align: left;
}

.card-media__body > :first-child {
    margin-top: 0;
}

.card-media__body > :last-child {
    margin-bottom: 0;
}

/* Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .card-media {
        --card-media-img-ratio: 6 / 5;
    }
}

/* ==========================================================================
   COMPONENT: CARD BASIC
   ========================================================================== */

/* Root
   -------------------------------------------------------------------------- */

.card-basic {
    position: relative;

    padding: var(--space-xs);

    background-color: var(--primary-100);

    border: 1px solid var(--border-primary);
    border-radius: var(--card-radius);

    transition: var(--transition-global);
}

/*
   Intentional Bricks specificity increase.

   The root is a Bricks Div and may otherwise keep Bricks' own flex direction.
*/

.card-basic.card-basic {
    display: flex;
    flex-direction: column;
}

/* Inner
   -------------------------------------------------------------------------- */

.card-basic .card-basic__inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    flex-grow: 1;
    width: 100%;

    gap: var(--space-s);
    padding: var(--space-s);

    background-color: var(--bg-light);

    border: 1px solid var(--border-primary);
    border-radius: var(--radius-l);

    text-align: center;
}

/* Heading
   -------------------------------------------------------------------------- */

.card-basic__heading {
    margin: 0;

    font-size: var(--h4);
    color: var(--heading-dark);
    text-align: center;
}

/* Body
   -------------------------------------------------------------------------- */

.card-basic__body {
    display: flex;
    flex-direction: column;

    flex-grow: 1;

    width: 100%;

    font-size: var(--text-s);
    color: var(--text-dark);
    text-align: center;
}

.card-basic__body > :first-child {
    margin-top: 0;
}

.card-basic__body > :last-child {
    margin-bottom: 0;
}

/* Button / stretched card link
   -------------------------------------------------------------------------- */

.card-basic__button {
    margin-top: auto;
}

.card-basic__button::before {
    content: '';

    position: absolute;
    inset: 0;

    z-index: 1;
}

/* Hover
   -------------------------------------------------------------------------- */

@media (hover: hover) {
    .card-basic:hover {
        outline: 2px solid var(--border-primary);
    }
}

/* Focus
   -------------------------------------------------------------------------- */

.card-basic:focus-within {
    box-shadow: var(--shadow-m);
}

.list-chevron-new {
    --icon-url: url('/wp-content/uploads/icon-check.svg');
    --icon-color: var(--secondary-default);
    --icon-offset: 0 0.3ex;
    --icon-size: 1.2em;
    --icon-gap: 0.5em;
    --icon-display: flex;
    --list-indent: 0;
}

.list-chevron-new ul {
    list-style: none;
    padding: 0;
    margin: var(--list-indent);
}

.list-chevron-new ul li:not(.item) {
    /* display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--icon-gap);
    line-height: 1.5;
    margin-bottom: var(--space-s); */
    display: list-item;
    padding-left: 2rem;
    position: relative;
    line-height: 1.5;
    margin-bottom: var(--space-s);
}

.list-chevron-new ul li:last-of-type {
    margin-bottom: 0;
}

.list-chevron-new ul li::before {
    content: '';
    display: var(--icon-display);
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    background-color: var(--icon-color);
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    mask-size: cover;
    translate: var(--icon-offset);
}

.bg-primary ul li::before,
.bg-dark ul li::before {
    background-color: var(--primary-50);
}

.list-chevron-new ul li:not(.item)::before,
.list-chevron-new ul li:not(.item)::after {
    translate: var(--icon-offset);
    position: absolute;
    top: 0;
    left: 0;
}


.grid-content-image {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-xl);
    align-items: center;
    .grid-content-image__content-wrapper {
    }
    .grid-content-image__image-wrapper {
        flex-shrink: 0;
    }
    .grid-content-image__image {
    }
    img {
        width: 31.25rem;
        max-width: 100%;
    }
    @media (max-width: 992px) {
        grid-template-columns: 1fr;
        .grid-content-image__image-wrapper {
            order: -1;
        }
    }
}

.grid-content-image--reverse {
    grid-template-columns: 2fr 3fr;
    .grid-content-image__image-wrapper {
        order: -1;
    }
    @media (max-width: 992px) {
        grid-template-columns: 1fr;
    }
}

/* HEADER */

.header {
    --header-height: 96px;
    --header-main-height: 88px;
    gap: 0;
    .header__top-bar-wrapper {
        background: var(--primary-950);
        color: var(--primary-0);
        padding-inline: var(--section-space-x);
        z-index: 2;
    }
    .header__top-bar {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }
    .header__intro-text {
        font-size: var(--text-s);
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: 1px;
        align-self: center;
        margin-right: auto;
    }
    .header__info-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-xs);
        min-height: 100%;
        padding: var(--space-s);
        color: var(--text-light);
        &:hover {
            background: var(--primary-default);
        }
        &:last-of-type {
            margin-inline-start: auto;
        }
    }

    .header__info-box svg {
        color: var(--secondary-300);
        transition: var(--transition-global);
        height: 1.125rem;
    }
    .header__info-box:hover svg {
        color: var(--text-light);
    }
    .header__info-text {
        font-size: var(--text-s);
        font-weight: 600;
    }
    .header__button {
        margin-inline-start: auto;
        margin-block: var(--space-2xs);
    }
    .header__main-bar-wrapper {
        z-index: 2;
        padding-inline: var(--section-space-x);
        padding-block: var(--space-s);
        width: 100%;
        margin: auto;
        max-width: 1920px;
        z-index: 999;
        background: var(--white);
        box-shadow:
            0px 0px 0px rgba(58, 0, 77, 0.03),
            0px 0px 3px rgba(58, 0, 77, 0.03),
            0px 0px 6px rgba(58, 0, 77, 0.03),
            0px 0px 9px rgba(58, 0, 77, 0.03),
            0px 1px 11px rgba(58, 0, 77, 0.03),
            0px 1px 14px rgba(58, 0, 77, 0.03);
    }
    .header__main-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: var(--white);
    }
    .header__logo {
        height: 4rem;
        transition: var(--transition-global);
    }
    .header__menu-wrapper {
        margin-inline-start: auto;
    }
    @media (max-width: 1240px) {
        .header__menu-wrapper {
            order: 99;
            margin-inline-start: 0;
        }
        .btn {
            margin-inline-start: auto;
        }
    }
    @media (max-width: 1100px) {
        .header__top-bar {
            justify-content: space-between;
        }
        .header__info-box:nth-child(1) {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .header__intro-text {
            display: none;
        }

        .btn {
            display: none;
        }
    }
    @media (max-width: 550px) {
        .header__info-box {
            margin-inline-start: auto;
        }
        .header__info-box:nth-child(3) {
            display: none;
        }
    }
}

body.header-main-fixed .header__logo {
    height: 3rem;
}

/* HEADER STICKY */
.header__main-bar-placeholder {
    display: none;
    height: var(--header-main-height, 0px);
}

body.header-main-fixed .header__main-bar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding-block: 0;
}

body.header-main-fixed .header__main-bar-placeholder {
    display: block;
}
@media (max-width: 1270px) {
    body.header-main-fixed .header__main-bar-wrapper {
        max-height: 100dvh;
    }

    body.header-main-fixed .wp-menu-buddy__list {
        max-height: calc(100dvh - var(--header-main-height, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* FOOTER */

.footer {
    background: var(--bg-dark);
    color: var(--link-light);
    font-size: var(--text-s);
    padding-block: 0;
    gap: 0;
    .footer__footer-top {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-block-start: var(--space-4xl);
        padding-block-end: var(--space-xl);
        border-bottom: 1px solid var(--neutral-100);
        column-gap: var(--space-3xl);
    }
    .footer__column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-m);
        flex: 1;
    }
    .footer__logo {
        width: 100%;
    }
    .footer__column:first-of-type {
        min-width: 25%;
    }

    .footer__text {
        & a {
            text-decoration: underline;
            margin-top: var(--space-2xs);
            font-weight: 600;
        }
    }
    .footer__logos-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-l);
        flex-wrap: wrap;
        & img {
            width: auto;
            height: 3.5rem;
            opacity: 0.7;
        }
    }
    .footer__heading {
        text-transform: capitalize;
        font-size: var(--text-xl);
        font-weight: 600;
        font-family: var(--ff-primary);
        color: var(--secondary-300);
    }
    .footer__list,
    .footer__list ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2xs);
    }
    .footer__list-item-link:hover {
        color: var(--secondary-300);
    }
    .footer__content-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-s);
    }
    .footer__contact-box {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-s);
    }
    .footer__contact-box--big {
        font-size: var(--text-l);
        font-weight: 600;
    }
    .footer__contact-box-icon {
        position: relative;
        top: 4px;
    }

    .footer__footer-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: var(--space-3xl);
        row-gap: var(--space-s);
        padding-block: var(--space-s);
    }
    .footer__bottom-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-l);
        & a {
            color: var(--secondary-300);
        }
    }

    .footer__small-text {
        font-size: var(--text-xs);
    }

    .day {
        display: inline-flex;
        min-width: 3rem;
        margin-inline-end: var(--space-xs);
    }

    @media (max-width: 992px) {
        .footer__footer-top {
            display: grid;
            grid-template-columns: var(--columns-2);
            gap: var(--space-3xl);
        }
    }

    @media (max-width: 728px) {
        .footer__footer-top {
            display: grid;
            grid-template-columns: var(--columns-1);
            gap: var(--space-3xl);
        }
    }
}

.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
}

.buttons-wrapper {
    --buttons-gap: var(--space-xs);
    --buttons-half-gap: calc(var(--buttons-gap) / 2);

    display: block;
    width: calc(100% + var(--buttons-gap));
    max-width: none;
    margin: calc(0px - var(--buttons-half-gap));
    text-align: inherit;

    > .btn {
        display: inline-flex;
        vertical-align: top;
        margin: var(--buttons-half-gap);
    }
}

.section-cta {
    position: relative;
    padding-block-start: calc(var(--space-4xl) * 1.5);
    padding-block-end: calc(var(--space-4xl) * 2);
    background-image: url('/wp-content/uploads/mauntain-bg-overlay.webp');
    background-size: cover;
    background-attachment: fixed;
    .section-cta__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 1;
        gap: 0;
    }
    .section-cta__eyebrow {
        margin-block-end: var(--space-s);
    }
    .section-cta__heading {
        margin-block-end: var(--space-m);
    }
    .section-cta__text {
        margin-block-end: var(--space-l);
        max-width: 60rem;
    }
    .section-cta__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }
}

.trees {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    width: 100%;
}

.hero-home {
    position: relative;
    /* padding-block-start: calc(var(--space-4xl) * 3);
    padding-block-end: calc(var(--space-4xl) * 1.5); */
    min-height: 104vh;
    background-image: url('https://yostdev.buildshd2.com/wp-content/uploads/home-hero-bg.webp');
    background-size: cover;
    background-attachment: fixed;
    .hero-home__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        display: none;
    }
    .hero-home__overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(transparent 0%, black 80%);
    }
    .hero-home__container {
        z-index: 2;
        color: var(--neutral-50);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0;
        margin-block: auto;
    }
    .hero-home__eyebrow {
        margin-block-end: var(--space-s);
    }
    .hero-home__heading {
        color: var(--neutral-50);
        margin-block-end: var(--space-m);
        font-size: var(--display);
        max-width: 70rem;
    }
    .hero-home__text {
        margin-block-end: var(--space-l);
    }
    @media (max-width: 700px) {
        min-height: auto;
        padding-block-start: calc(var(--space-4xl) * 2);
        padding-block-end: calc(var(--space-4xl) * 1.5);
    }
}

.has-divider {
    position: relative;
    padding-block-end: calc(var(--space-4xl) * 1.5);
}

.has-divider--top {
    padding-block-start: calc(var(--space-3xl) - var(--divider-height));
}

.section--big.has-divider--top {
    padding-block-start: calc(var(--space-4xl) - var(--divider-height));
}

.divider {
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 100%;
    z-index: 2;
    min-width: 60rem;
    fill: var(--white);
    height: var(--divider-height);
}

.divider--dark {
    fill: var(--bg-dark);
}

.divider--top {
    top: -2px;
    bottom: auto;
    transform: rotateZ(180deg);
}

.divider-plain {
    height: 1px;
    width: 100%;
    border-bottom: 1px dashed var(--primary-default);
}

.section-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-s);
    width: 100% !important;
    .section-intro__heading {
        margin: 0;
        font-size: var(--h1);
        max-width: 60rem;
    }
    .section-intro__text {
        font-size: var(--text-xl);
        width: 62.5rem;
        max-width: 100%;
    }
}

.bg-dark .section-intro {
    h2,
    h3,
    p {
        color: var(--heading-light);
    }
}

.section-intro--left {
    align-items: flex-start;
    text-align: left;
}

.section-intro--border {
    padding-block-end: var(--space-m);
    border-block-end: 3px solid var(--border-primary);
}

.about-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    margin-block-end: var(--space-m);
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--border-light);
    &:last-of-type {
        margin-block-end: 0;
    }
    .about-box__heading {
        font-size: var(--text-l);
    }
    .about-box__text {
    }
}

.img-border {
    border-radius: var(--image-radius);
    border: 7px solid var(--white);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
    object-fit: cover;
}
.img-border--circle {
    border-radius: var(--radius-full);
    border: 7px solid var(--white);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
    aspect-ratio: 1/1;
    object-fit: cover;
}

.card-doctor {
    background: var(--bg-light);
    padding: var(--space-l);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    .card-doctor__image {
        width: 21.25rem;
        max-width: 100%;
        aspect-ratio: 1/1;
        border-radius: var(--radius-full);
        margin-block-end: var(--space-l);
    }
    .card-doctor__eyebrow {
        margin-block-end: var(--space-xs);
    }
    .card-doctor__heading {
        margin-block-end: var(--space-s);
    }
    .card-doctor__text {
        margin-block-end: var(--space-m);
    }
    .card-doctor__button {
        margin-block-start: auto;
    }
}

.bg-images-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    .bg-images-grid__image {
        width: 100%;
        object-fit: cover;
    }
    @media (max-width: 992px) {
        grid-template-columns: 1fr;
        .bg-images-grid__image:last-of-type {
            display: none;
        }
    }
}

.z1 {
    z-index: 1;
}

.card-review {
    color: var(--text-dark-alt);
    .card-review__stars {
        color: #fd840b;
    }
    .card-review__text {
        font-family: var(--ff-accent);
        font-size: var(--text-2xl);
        font-weight: 500;
        font-style: italic;
    }
    .card-review__author {
        font-size: var(--text-xs);
        font-weight: 600;
        span {
            font-weight: 400;
            color: var(--text-dark);
        }
        &::before {
            content: '— ';
        }
    }
}

.accordion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    .accordion__item {
        background: var(--primary-default);
        color: var(--white);
        padding-block: var(--space-m);
        padding-inline: var(--space-l);
        border-radius: var(--radius-l);
        gap: var(--space-s);
    }
    .brxc-active-class {
    }
    .accordion-title-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--space-m);
        justify-content: space-between;
    }
    .accordion__title {
    }
    .accordion__heading {
        color: var(--white);
        font-size: var(--text-xl);
    }
    .ion-ios-arrow-forward {
    }
    .accordion__icon {
    }
    .accordion-content-wrapper {
    }
    .accordion__content {
    }
    .accordion__text {
        font-size: var(--text-s);
    }
}

.hero {
    position: relative;
    padding-block: var(--space-4xl);
    overflow: clip;

    .hero__images-wrapper {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        gap: 0;
        overflow: clip;
    }

    .hero__image-wrapper {
        position: relative;

        &:nth-of-type(1)::after,
        &:nth-of-type(2)::after {
            content: '';
            position: absolute;
            inset: 0;
        }

        &:nth-of-type(1)::after {
            background-image: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.9) 70%,
                white
            );
        }

        &:nth-of-type(2)::after {
            background-image: linear-gradient(90deg, white, transparent 45%);
        }
    }

    .hero__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero__overlay {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.95),
            white 60%,
            transparent
        );
        pointer-events: none;
    }

    .hero__container {
        width: var(--max-width-40);
        max-width: 100%;
        margin-inline: 0 auto;
        z-index: 1;
    }

    .hero__text {
        margin-block-end: var(--space-xs);
    }

    @media (max-width: 768px) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        row-gap: var(--space-xl);
        padding-block: var(--space-2xl);

        .hero__images-wrapper {
            display: contents;
        }

        .hero__image-wrapper:nth-of-type(1) {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .hero__image-wrapper:nth-of-type(2) {
            grid-column: 1;
            grid-row: 2;
            aspect-ratio: 16 / 9;
            z-index: 1;

            &::after {
                display: none;
            }

            .hero__image {
                border-radius: var(--radius-m);
            }
        }

        .hero__content-wrapper {
            grid-column: 1;
            grid-row: 1;
            z-index: 2;
        }
    }
}

.page-intro {
    padding-block-end: 0;
    .page-intro__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-m);
    }
    .page-intro__text {
        font-family: var(--ff-primary);
        font-size: var(--text-xl);
        color: var(--text-primary);
        font-weight: 600;
    }
    .page-intro__divider {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-xs);
        &::before {
            content: '';
            display: block;
            height: 1px;
            width: 5.625rem;
            border-block-end: 1px dashed var(--primary-default);
        }
        &::after {
            content: '';
            display: block;
            height: 1px;
            width: 5.625rem;
            border-block-end: 1px dashed var(--primary-default);
        }
    }
    .page-intro__divider-icon {
        color: var(--primary-default);
        height: 1.25rem;
    }
}

.contact-container {
    border-radius: var(--card-radius);
    overflow: clip;
    gap: 0;
    .contact-container__column {
        padding: var(--space-xl);
        &:first-of-type {
            background: var(--bg-light);
        }
        &:last-of-type {
            background: var(--bg-dark);
            color: var(--white);
        }
    }
    .contact-container__image {
        border-radius: var(--card-radius);
        aspect-ratio: 2/1;
        object-fit: cover;
    }
    .contact-container__details {
    }
    .contact-container__heading {
        color: var(--white);
    }
    .contact-container__form-text {
        font-size: var(--text-s);
    }
    .contact-container__shortcode {
    }
}

.contact-details {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start;
    gap: var(--space-m);
}
.contact-detail {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xs);
    & a {
        text-decoration: underline;
        color: var(--secondary-default);
        font-weight: 600;
        font-size: var(--text-l);
    }
    .contact-detail__icon {
        flex-shrink: 0;
        color: var(--secondary-default);
        width: 1.625rem;
    }
    .contact-detail__text {
        .phone-shortcode {
            font-size: var(--text-xl);
            font-weight: 600;
            line-height: 1.4;
        }
    }
}

.hours-shortcode {
    list-style: none;
    margin: 0;
    padding: 0;
    .day {
        display: inline-flex;
        margin-inline-end: var(--space-xs);
        font-weight: 600;
    }
}

.map-shortcode {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    margin-block-start: -8rem;
}

.section-map {
    /* --map-offset: 11rem;
    position: relative;
    margin-block-start: calc(var(--map-offset) * -1);
    padding-block-start: calc(var(--space-l) + var(--map-offset)); */
    min-height: 37.5rem;
}

.text-info {
    background: var(--bg-light-alt);
    border-inline-start: 3px solid var(--secondary-default);
    padding: var(--space-m);
    font-size: var(--text-s);
}

.has-trees {
    padding-block-end: calc(var(--space-4xl) * 2);
}

.happyfiles-gallery {
    ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
        gap: var(--space-2xs) !important;
    }
    ul li.item {
        display: block;
        width: 100%;
        height: 100% !important;
        margin: 0;
        min-width: 0;
        min-height: 0;
    }
    ul li::before {
        display: none;
    }
    ul li img {
        aspect-ratio: 1/1;
    }
    @media (max-width: 1100px) {
        ul {
            grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
        }
    }
}

/* .office-tour-gallery {
    ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 350px));
    }
}
.office-tour-gallery > ul.crop > li.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}

.office-tour-gallery > ul.crop > li.item:nth-child(2) {
  grid-area: 1 / 3 / 3 / 4;
}

.office-tour-gallery > ul.crop > li.item:nth-child(3) {
  grid-area: 1 / 4 / 2 / 5;
}

.office-tour-gallery > ul.crop > li.item:nth-child(4) {
  grid-area: 2 / 1 / 3 / 2;
}

.office-tour-gallery > ul.crop > li.item:nth-child(5) {
  grid-area: 2 / 2 / 3 / 3;
}

.office-tour-gallery > ul.crop > li.item:nth-child(6) {
  grid-area: 2 / 4 / 3 / 5;
}

.office-tour-gallery > ul.crop > li.item:nth-child(7) {
  grid-area: 3 / 1 / 4 / 3;
}

.office-tour-gallery > ul.crop > li.item:nth-child(8) {
  grid-area: 3 / 3 / 4 / 5;
}

.office-tour-gallery > ul.crop > li.item > figure,
.office-tour-gallery > ul.crop > li.item > figure > a,
.office-tour-gallery > ul.crop > li.item > figure > a > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.office-tour-gallery > ul.crop > li.item > figure {
  margin: 0;
  overflow: hidden;
}

.office-tour-gallery > ul.crop > li.item img {
  object-fit: cover;
  object-position: center;
  aspect-ratio: unset;
}

.office-tour-gallery > ul.crop > li.item figcaption {
  text-align: left;
  font-size: var(--text-s);
  font-weight: 500;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  padding: var(--space-s) var(--space-m);
}

@media (max-width: 1100px) {
  .office-tour-gallery > ul.crop[data-col] {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    aspect-ratio: auto;
  }

  .office-tour-gallery > ul.crop > li.item:nth-child(n) {
    grid-area: auto;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
} */

/* Mosaic placement */
.office-tour-gallery {
  ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 350px;
    grid-auto-flow: dense;
  }
}

/*
 * Repeating 8-item mosaic:
 *
 * ┌───────────┬─────┬─────┐
 * │     1     │     │  3  │
 * ├─────┬─────┤  2  ├─────┤
 * │  4  │  5  │     │  6  │
 * ├─────┴─────┼─────┴─────┤
 * │     7     │     8     │
 * └───────────┴───────────┘
 *
 * Then repeats for 9–16, 17–24, etc.
 */

.office-tour-gallery > ul.crop > li.item:nth-child(8n + 1) {
  grid-column: span 2;
}

.office-tour-gallery > ul.crop > li.item:nth-child(8n + 2) {
  grid-row: span 2;
}

.office-tour-gallery > ul.crop > li.item:nth-child(8n + 7),
.office-tour-gallery > ul.crop > li.item:nth-child(8n + 8) {
  grid-column: span 2;
}

/* Images */
.office-tour-gallery > ul.crop > li.item > figure,
.office-tour-gallery > ul.crop > li.item > figure > a,
.office-tour-gallery > ul.crop > li.item > figure > a > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.office-tour-gallery > ul.crop > li.item > figure {
  margin: 0;
  overflow: hidden;
}

.office-tour-gallery > ul.crop > li.item img {
  object-fit: cover;
  object-position: center;
  aspect-ratio: unset;
}

.office-tour-gallery > ul.crop > li.item figcaption {
  text-align: left;
  font-size: var(--text-s);
  font-weight: 500;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  padding: var(--space-s) var(--space-m);
}

/* Responsive */
@media (max-width: 1100px) {
  .office-tour-gallery > ul.crop[data-col] {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(250px, 100%), 1fr)
    );
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    aspect-ratio: auto;
  }

  .office-tour-gallery > ul.crop > li.item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}

.section-doctor {
    
    .section-doctor__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }
    .section-doctor__image-doctor {
        width: 20rem;
        max-width: 100%;
        margin-block-end: var(--space-xl);
    }
    .section-doctor__heading {
        margin-block-end: var(--space-m);
    }
    .section-doctor__text {
        
    }
    .section-doctor__image {
        margin-block-start: var(--space-xl);
        aspect-ratio: 16/9;
        object-fit: cover;
    }
}


.card-staff {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--border-light);
    .card-staff__initials-wrapper {
        background: var(--bg-light-alt);
        border-radius: var(--radius-full);
        width: 3rem;
        height: 3rem;
        display: grid;
        place-items: center;
    }
    .card-staff__initials {
        line-height: 1;
        font-size: var(--text-s);
        text-transform: uppercase;
        color: var(--secondary-800);
        font-weight: 600;
    }
    .card-staff__person {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3xs);
    }
    .card-staff__name {
        margin: 0;
        font-weight: 500;
        color: var(--heading-dark);
        line-height: 1;
    }
    .card-staff__role {
        margin: 0;
        line-height: 1;
        font-size: var(--text-xs);
        color: var(--neutral-600);
    }
}


.grid-staff {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    column-gap: var(--space-xl);
    row-gap: 0;
    align-items: stretch;
}

.bg-mountains {
    background-image: url('/wp-content/uploads/mountains-bg.webp');
    background-size: cover;
    background-position: bottom left;
    @media (min-width: 1000px) {
        background-attachment: fixed;
    }
    position: relative;
    & * {
        z-index: 2;
    }
    &::before {
        content:'';
        display: flex;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(var(--white),rgba(255, 255, 255, 0.5));
        z-index: 1;
    }
}

.service-intro {
 color: var(--text-primary);
 font-size: var(--text-xl);
 font-weight: 600;
 font-family: var(--ff-primary);
}

.heading--border {
    width: 100%;
    padding-block-end: var(--space-m);
    border-block-end: 3px solid var(--primary-default);
}


.related-list {
margin: 0 !important;
    .related-list__item {
        
    }
    .related-list__link {
        color: var(--primary-default);
        font-weight: 600;
        text-decoration: underline;
        &:hover {
            color: var(--link-primary-hover);
        }
    }
}


.section-related {
    h2 {
        margin-block-end: 0 !important;
    }
}

.wp-block-image figure.alignleft {
  max-width: 30rem;
  @media(max-width: 991px) {
    max-width: 100%;
    float: none;
  }
}

.post-featured-image {
   aspect-ratio: 16/9;
   width: 100%;
   object-fit: cover;
   margin-block-end: var(--space-m);
   border-radius: var(--image-radius);
}

.hero-small {
    padding-block-end: var(--space-4xl);
}