:root {
    /* Greens derived from the flag's #009C3B, pulled down in saturation so the
       palette reads Brazilian without shouting. */
    --color-forest-950: #0c2a1c;
    --color-forest-900: #15402b;
    --color-forest-800: #1e5739;
    --color-forest-700: #2a7049;
    /* The flag's #002776, given the same treatment as the greens: saturation
       down from 100 to 57 percent. It bookends the page — the utility strip and
       the footer — so the third flag colour carries structure instead of
       decoration, with the green sections held between them. */
    --color-navy-950: #14224a;
    --color-sage-200: #c6d9c8;
    --color-sage-100: #e1ece2;
    /* The grounds sit just off white. An earlier pass tinted them toward the
       flag's yellow and the whole page read as beige, so the cast now leans on
       the green side of neutral — present enough not to feel clinical, far
       enough from 45 degrees not to look like paper. */
    --color-cream-100: #f0f4f0;
    --color-cream-50: #fbfcfa;
    /* Gold in three steps, because one yellow cannot do every job: 700 is dark
       enough to be text, and to be a focus ring, on either cream; 400 is a
       surface and needs dark text on top; 500 sits between them, light enough
       to still carry dark text as the accent button's hover. Asking 500 to also
       be the focus ring put it between two opposing requirements and it failed
       the darker cream at 2.93:1. */
    --color-gold-700: #8c6410;
    --color-gold-500: #b8860b;
    --color-gold-400: #e3bd52;
    --color-ink: #16211b;
    --color-muted: #5c6a61;
    --color-line: #dbe3dc;
    --color-line-strong: #84957f;
    --color-white: #ffffff;

    /* Channel lists for the colors that are also used with alpha. A literal
       rgb() survives a palette change untouched — that is how the old orange
       outlived its own removal — so these stay next to the hex they mirror and
       tests/smoke.sh fails when the two drift apart. */
    --channels-forest-950: 12 42 28;
    --channels-forest-700: 42 112 73;
    --channels-gold-400: 227 189 82;
    --channels-cream-50: 251 252 250;

    --shadow-soft: 0 1.5rem 4rem rgb(var(--channels-forest-950) / 10%);
    --radius-small: 0.5rem;
    --radius-medium: 1rem;
    --radius-large: 1.75rem;
    --container: 76rem;
    --font-sans: Inter, Aptos, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: Georgia, "Times New Roman", serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-cream-50);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 0.2rem solid var(--color-gold-700);
    outline-offset: 0.2rem;
}

/* gold-500 is tuned to the cream ground and goes muddy on the dark sections,
   so those get the lighter step instead. */
.utility-bar :focus-visible,
.section--forest :focus-visible,
.closing-cta :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--color-gold-400);
}

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

h1,
h2,
h3 {
    color: var(--color-forest-950);
    line-height: 1.08;
}

h1,
h2 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.035em;
}

h1 {
    max-width: 12ch;
    font-size: clamp(3rem, 8vw, 6.5rem);
}

h2 {
    max-width: 18ch;
    font-size: clamp(2.2rem, 5vw, 4.25rem);
}

h3 {
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}

p {
    max-width: 68ch;
}

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin-inline: auto;
}

.section {
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section--compact {
    padding-block: clamp(3rem, 6vw, 5rem);
}

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

.section--cream {
    background: var(--color-cream-100);
}

.section--forest {
    background: var(--color-forest-900);
    color: var(--color-white);
}

.section-heading {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2.25rem, 5vw, 4rem);
}

.section-heading p {
    color: var(--color-muted);
    font-size: 1.08rem;
}

.section--forest h2,
.section--forest h3,
.section--forest .section-heading p {
    color: var(--color-white);
}

.eyebrow {
    margin-bottom: 0.75rem;
    color: var(--color-gold-700);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow--light {
    color: var(--color-gold-400);
}

.lede {
    color: var(--color-muted);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.6;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.75rem 1rem;
    transform: translateY(-180%);
    border-radius: var(--radius-small);
    background: var(--color-white);
    color: var(--color-forest-950);
    font-weight: 700;
}

.skip-link:focus {
    transform: translateY(0);
}

.utility-bar {
    background: var(--color-navy-950);
    color: var(--color-white);
    font-size: 0.8rem;
}

.utility-bar__inner {
    display: flex;
    min-height: 2.25rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding-block: 0.4rem;
}

.utility-bar p {
    margin: 0;
}

.utility-bar a {
    color: var(--color-gold-400);
    font-weight: 700;
}

.language-switcher ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 0.35rem 0.85rem;
    list-style: none;
}

.language-switcher a {
    color: rgb(255 255 255 / 70%);
    font-weight: 600;
    text-decoration: none;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
}

/* The active language is a label, not a destination the reader needs. */
.language-switcher a[aria-current="true"] {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.site-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--color-line);
    background: rgb(var(--channels-cream-50) / 96%);
}

.header-main {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

.brand__logo {
    display: block;
    width: auto;
    height: 2.5rem;
}

.menu-toggle {
    display: none;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-white);
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 800;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
    display: block;
    width: 1.1rem;
    height: 0.1rem;
    background: currentColor;
    content: "";
    transition: transform 180ms ease;
}

.menu-toggle__icon {
    position: relative;
}

.menu-toggle__icon::before {
    position: absolute;
    top: -0.35rem;
}

.menu-toggle__icon::after {
    position: absolute;
    top: 0.35rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav ul a {
    display: block;
    border-radius: 999px;
    padding: 0.65rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.site-nav ul a:hover,
.site-nav ul a[aria-current="page"] {
    background: var(--color-sage-100);
    color: var(--color-forest-900);
}

.button {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.8rem 1.3rem;
    background: var(--color-forest-900);
    color: var(--color-white);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.button:hover {
    transform: translateY(-0.12rem);
    background: var(--color-forest-700);
}

.button--small {
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-size: 0.74rem;
}

.button--accent {
    background: var(--color-gold-400);
    color: var(--color-forest-950);
}

.button--accent:hover {
    background: var(--color-gold-500);
}

.button--outline {
    border-color: var(--color-forest-900);
    background: transparent;
    color: var(--color-forest-900);
}

.button--outline:hover {
    background: var(--color-sage-100);
}

.button--light {
    background: var(--color-white);
    color: var(--color-forest-950);
}

.button[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}