/* engage — default.css | global variables, reset, typography, forms */


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

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

a img { border: none; }

table { border-collapse: collapse; }


/*-- Variables --*/
:root {

    /* ----- Core (Figma) ----- */
    --engage-bg:           #F5F5F5;   /* page background ("fill") */
    --engage-text:         #262626;   /* body text ("Dark grey") */
    --engage-white:        #FFFFFF;
    --engage-black:        #000000;

    /* ----- Brand colours (Figma) ----- */
    --engage-green:        #1F4443;   /* dark green ("Dark green") */
    --engage-accent:       #65BA92;   /* mint/teal — CTA buttons */
    --engage-green-bright: #40BD8F;   /* bright green */
    --engage-navy:         #1A2B46;   /* darkest navy */
    --engage-blue:         #255C82;   /* blue */
    --engage-sky:          #2A94B5;   /* sky / cyan */
    --engage-tan:          #D7A56B;   /* tan */
    --engage-gold:         #E0A360;   /* gold / orange */
    --engage-peach:        #ECD7C9;   /* hero / section beige panel */
    --engage-plum:         #85476E;   /* blockquote line */
    --engage-grey:         #D9D9D9;   /* popup scrollbar thumb */
    --engage-neon:         #66D9A3;   /* popup scrollbar thumb */

    /* RGB channels (for rgba()) */
    --engage-green-rgb:    31, 68, 67;
    --engage-text-rgb:     38, 38, 38;
    --engage-white-rgb:    255, 255, 255;

    /* ----- Fonts (Figma — roles confirmed) ----- */
    --ff-figtree:     "Figtree", sans-serif;
    --ff-montserrat:  "Montserrat", sans-serif;
    --ff-roboto:      "Roboto", sans-serif;

    --ff-heading:     var(--ff-figtree);     /* headings — Figtree */
    --ff-body:        var(--ff-montserrat);  /* body — Montserrat 16/24/400 */
    --ff-alt:         var(--ff-roboto);      /* secondary body — Roboto (e.g. hero intro) */

    /* ----- Easing ----- */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

}


/*-- Container --*/
.main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1536px) { .main { max-width: 1295px; } }
@media (max-width: 1200px) { .main { max-width: 1040px; } }
@media (max-width: 1024px) { .main { max-width: 945px; } }
@media (max-width: 991px)  { .main { max-width: 730px; } }
@media (max-width: 767px)  { .main { max-width: 100%; } }


/*-- Flex helpers --*/
.c-row { display: flex; flex-direction: row; flex-wrap: wrap; }
.c-col { display: flex; flex-direction: column; flex-wrap: nowrap; }


/*-- Section spacing --*/
.section-space { padding: 100px 0; }

@media (max-width: 1200px) { .section-space { padding: 80px 0; } }
@media (max-width: 991px)  { .section-space { padding: 60px 0; } }
@media (max-width: 767px)  { .section-space { padding: 44px 0; } }


/*-- Section backgrounds --*/
.green-section-bg { background-color: var(--engage-green) !important; color: var(--engage-white); }
.peach-section-bg { background-color: var(--engage-peach) !important; }
.white-section-bg { background-color: var(--engage-white) !important; }

.green-section-bg h1, .green-section-bg .h1,
.green-section-bg h2, .green-section-bg .h2,
.green-section-bg h3, .green-section-bg .h3,
.green-section-bg h4, .green-section-bg .h4,
.green-section-bg h5, .green-section-bg .h5,
.green-section-bg h6, .green-section-bg .h6,
.green-section-bg p,
.green-section-bg a:not([class*="btn"]):not([class*="cta-"]) {
    color: var(--engage-white);
}


/*-- Site main --*/
.site-main { position: relative; }


/*-- Body --*/
body {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*-- Headings --*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ff-heading);
    color: inherit;
    margin: 0;
}

h1, .h1 { font-size: 44px; line-height: 1.2; font-weight: 800; }
@media (max-width: 1024px) { h1, .h1 { font-size: 38px; } }
@media (max-width: 767px)  { h1, .h1 { font-size: 28px; } }

h2, .h2 { font-size: 34px; line-height: 1.25; font-weight: 700; }
@media (max-width: 767px)  { h2, .h2 { font-size: 24px; } }

h3, .h3 { font-size: 24px; line-height: 1.3; font-weight: 700; }
@media (max-width: 767px)  { h3, .h3 { font-size: 20px; } }

h4, .h4 { font-size: 20px; line-height: 1.4; font-weight: 700; }
h5, .h5 { font-size: 18px; line-height: 1.45; font-weight: 700; }
h6, .h6 { font-size: 16px; line-height: 1.5; font-weight: 700; }


/*-- Body copy --*/
p {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
    margin: 0 0 1em;
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }
em, i     { font-style: italic; }


/*-- Eyebrow --*/
.tag-mono {
    display: inline-block;
    font-family: var(--ff-heading);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--engage-green);
}

@media (max-width: 767px) { .tag-mono { font-size: 20px; } }


/*-- Button --*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: var(--engage-accent);
    color: var(--engage-black);
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.875;
    letter-spacing: -0.12px;
    text-align: center;
    white-space: nowrap;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: background-color 0.3s var(--ease-out-quart), color 0.3s var(--ease-out-quart);
    transition: background-color 0.3s var(--ease-out-quart), color 0.3s var(--ease-out-quart);
}

.btn:hover,

.btn:focus {
    background-color: var(--engage-neon);
    color: var(--engage-black);
    outline: none;
}


/*-- Links --*/
a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease-out-quart);
}

a:hover,
a:focus { color: var(--engage-green); }


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


/*-- Forms --*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
    width: 100%;
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--engage-text);
    background-color: var(--engage-white);
    border: 1px solid #D7D7D7;
    border-radius: 6px;
    padding: 14px 18px;
    transition: border-color 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--engage-green);
    box-shadow: 0 0 0 3px rgba(var(--engage-green-rgb), 0.12);
}

textarea {
    resize: vertical;
    min-height: 140px;
}

::-webkit-input-placeholder { color: var(--engage-text); opacity: 0.6; }
::-moz-placeholder          { color: var(--engage-text); opacity: 0.6; }
:-ms-input-placeholder      { color: var(--engage-text); opacity: 0.6; }
::-ms-input-placeholder     { color: var(--engage-text); opacity: 0.6; }
::placeholder               { color: var(--engage-text); opacity: 0.6; }

label {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: inherit;
    margin-bottom: 8px;
}


/*-- Screen reader --*/
.screen-reader-text,
.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: var(--engage-green);
    clip: auto !important;
    clip-path: none;
    color: var(--engage-white);
    display: block;
    font-size: 16px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}