/* ==================================================
   GLOBAL COLORS
================================================== */

:root {
    --color-yellow: #fff19a;
    --color-pink: #ff435d;
    --color-white: #ffffff;
    --color-grey: #f3f3f3;
    --color-black: #000000;

    --color-hero-button: #f6ea58;

    --font-body: Arial, Helvetica, sans-serif;
    --font-display: Impact, "Arial Narrow", Arial, sans-serif;

    --page-padding: 7%;
    --content-width: 1450px;

    --header-height: 235px;
    --wave-height: 170px;

    --transition-fast: 0.2s ease;
    --transition-standard: 0.35s ease;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

body.menu-open {
    overflow: hidden;
}

main {
    width: 100%;
	padding-top:235px;
}

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

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

button {
    color: inherit;
    font: inherit;
}


/* ==================================================
   ACCESSIBILITY
================================================== */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 6px;
}


/* ==================================================
   SHARED DISPLAY TYPE
================================================== */

.display-type {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}


/* ==================================================
   SHARED OUTLINE BUTTON
================================================== */

.outline-button {
    display: inline-flex;
    width: 265px;
    min-height: 82px;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.outline-button:hover {
    transform: translateY(-3px);
}


/* ==================================================
   SHARED SECTION WAVE
================================================== */

.top-wave {
    position: absolute;
    top: calc(var(--wave-height) * -1);
    left: 0;
    z-index: 3;
    width: 100%;
    height: var(--wave-height);
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.top-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.top-wave path {
    fill: var(--section-color);
}

.guide-section > .top-wave svg path {
    fill: var(--section-color) !important;
}
.section-wave,
.section-wave-yellow,
.section-wave-white,
.section-wave-coral,
.section-wave-light,
.section-wave-black {
    all: unset;
}


/* ==================================================
   TABLET GLOBAL VARIABLES
================================================== */

@media (max-width: 1000px) {

    :root {
        --page-padding: 6%;
        --header-height: 175px;
        --wave-height: 120px;
    }

}


/* ==================================================
   PHONE GLOBAL VARIABLES
================================================== */

@media (max-width: 760px) {

    :root {
        --header-height: 145px;
        --wave-height: 90px;
    }
	    main {
        padding-top: 0;
    }

    .outline-button {
        width: 235px;
        min-height: 72px;
    }

}


/* ==================================================
   SMALL PHONE GLOBALS
================================================== */

@media (max-width: 480px) {

    :root {
        --page-padding: 5%;
        --wave-height: 75px;
    }

    .outline-button {
        width: 100%;
    }

}

/* =========================
   GLOBAL TYPOGRAPHY
========================= */

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-black);
}

/* Remove inconsistent browser spacing */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

/* Shared heading style */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: inherit;
}

/* Main page title */

h1 {
    margin-bottom: 2rem;
    font-size: clamp(4rem, 8vw, 8rem);
}

/* Major section title */

h2 {
    margin-bottom: 1.75rem;
    font-size: clamp(3rem, 5.5vw, 6rem);
}

/* Subsection or card title */

h3 {
    margin-bottom: 1.25rem;
    font-size: clamp(2rem, 3.5vw, 3.75rem);
}

/* Smaller headings */

h4 {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 2vw, 2.25rem);
}

h5 {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

h6 {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

/* Paragraphs */

p {
    margin-bottom: 1.5rem;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.7;
}

/* Prevent unwanted space after the last text element */

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
    margin-bottom: 0;
}

/* Links inherit the surrounding text color */

a {
    color: inherit;
}

/* Small introductory label above a heading */

.eyebrow {
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Larger editorial heading */

.display-heading {
    font-size: clamp(4.5rem, 9vw, 10rem);
    line-height: 0.85;
}

/* Narrow readable paragraph */

.text-narrow {
    max-width: 42rem;
}

/* Slightly larger introductory paragraph */

.lead {
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    line-height: 1.6;
}