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

:root {
    --dark:         #0c1a0e;
    --dark2:        #112214;
    --dark3:        #1a3320;
    --green:        #0f6b35;
    --green-mid:    #2f8b47;
    --green-lt:     #74b82a;
    --green-pale:   #ebf5e3;
    --green-mist:   #f3f8ef;
    --earth:        #556856;
    --orange:       #ff711a;
    --orange-hover: #e05c0a;
    --cream:        #faf6ee;
    --cream2:       #f3f8ef;
    --cream3:       #d6e3cd;
    --border:       #d6e3cd;
    --text:         #172417;
    --text-mid:     #556856;
    --white:        #fefefe;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Krub', sans-serif;
    font-size: 17px;
    color: var(--text);
    background: var(--cream);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.8rem, 5.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); letter-spacing: -0.02em; }
p  { font-size: clamp(1rem, 1.4vw, 1.1rem); }

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

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

.eyebrow {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.eyebrow-earth  { color: var(--earth); }
.eyebrow-green  { color: var(--green-mid); }
.eyebrow-lt     { color: var(--green-lt); }

.section-sub {
    color: var(--text-mid);
    max-width: 580px;
    margin-bottom: 64px;
    font-size: 1.1rem;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    background: var(--orange);
    color: var(--white);
    font-family: 'Krub', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 7px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--orange-hover); transform: translateY(-1px); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    background: transparent;
    color: var(--white);
    font-family: 'Krub', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 7px;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.28);
    transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }

/* Reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in {
    opacity: 1;
    transform: none;
}
.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }
.reveal.delay-3 { transition-delay: 0.36s; }
.reveal.delay-4 { transition-delay: 0.48s; }

/* Fade-only reveal: no transform, so position:fixed descendants
   (e.g. the reCAPTCHA badge) pin to the viewport, not this wrapper. */
.reveal--no-transform,
.reveal--no-transform.in { transform: none; }