/* =========================================================
   BASE.CSS
   Shared Variables + Reset + Typography + Utilities
   Source of truth: Home Page
========================================================= */

/* =========================
   CSS VARIABLES
========================= */
:root {

    /* Brand Colors */
    --teal-900: #003646;
    --teal-700: #003646;
    --teal-600: #0e8089;
    --teal-500: #16a3ad;
    --teal-400: #3fc2cb;

    --cyan-100: #d6f3f5;
    --cyan-50: #eafafb;

    --coral: #ff6b5e;
    --coral-soft: #ffb3aa;

    --gold: #ffc24b;
    --gold-soft: #ffe2a3;

    --cream: #fbf7ef;
    --paper: #ffffff;

    --ink: #103137;
    --ink-soft: #4a6066;

    --line: rgba(10, 108, 116, .14);

    /* Shadows */
    --shadow-sm: 0 4px 18px -8px rgba(10, 108, 116, .30);
    --shadow-md: 0 18px 50px -22px rgba(10, 108, 116, .45);
    --shadow-lg: 0 40px 90px -40px rgba(5, 59, 65, .55);

    /* Radius */
    --r-lg: 30px;
    --r-md: 20px;
    --r-sm: 14px;

    /* Typography */
    --display: "Bricolage Grotesque", sans-serif !important;
    --body: "Plus Jakarta Sans", sans-serif !important;
}

/* =========================
   RESET
========================= */

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

/* =========================
   HTML
========================= */

html {
    scroll-behavior: smooth;
}

/* =========================
   BODY
========================= */

body {
/*     font-family: var(--body); */
	font-family:  "Plus Jakarta Sans", sans-serif !important;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* =========================
   HEADINGS
========================= */

h1,
h2,
h3,
h4 {
/*     font-family: var(--display); */
	font-family: "Bricolage Grotesque", sans-serif !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

/* =========================
   LINKS
========================= */

a {
    text-decoration: none !important;
    color: inherit;
}

/* =========================
   IMAGES
========================= */

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

/* =========================
   CONTAINER
========================= */

.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 28px;
    padding-right: 28px;
}

/* =========================
   EYEBROW LABEL
========================= */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6em;

/*     font-family: var(--body); */
	font-family:  "Plus Jakarta Sans", sans-serif !important;
    font-weight: 700;
    font-size: .72rem;

    letter-spacing: .22em;
    text-transform: uppercase;

    color: var(--teal-600);
}

.eyebrow::before {
    content: "";
    display: inline-block;

    width: 26px;
    height: 2px;

    background: var(--coral);
    border-radius: 2px;
}

/* =========================
   GLOBAL SECTION HELPERS
========================= */

section {
    position: relative;
}

.sec-pad {
    padding: 90px 0;
}

.sec-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.sec-head h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    color: var(--teal-900);
    margin: 16px 0 14px;
}

.sec-head p {
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.sec-head .y {
    color: var(--coral);
}

/* =========================
   UTILITY CLASSES
========================= */

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

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

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

.hidden {
    display: none !important;
}

.overflow-hidden {
    overflow: hidden;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* =========================
   COMMON ANIMATION HELPERS
========================= */

.fade-up {
    animation: fadeUp .6s ease forwards;
}

/* =========================
   COMMON KEYFRAMES
========================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}