/* ---------- 1. Root palette & quick reset ---------- */
:root {
    --color-primary: #0b3f2b;
    --color-primary-rgb: 11, 63, 43;
    /* dark teal – adjust to taste */
    --color-secondary: #FAF5E0;
    --color-secondary-rgb: 250, 245, 224;
    /* cream – adjust to taste */

    --text-dark: var(--color-primary);
    --text-light: var(--color-secondary);
    --max-width: 95%;
    /* ≈1024 px */
    --notch-size: clamp(5rem, 20vw, 10rem);
}

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

body {
    font-size: 1.125rem;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--color-secondary);
    padding-top: 4.25rem;
}

h1,
h2,
h3 {
    line-height: 1.2;
}

/* Base element resets formerly provided by Tailwind's Preflight (removed with the
   CDN). Without these, browser defaults reappear — notably links turning blue and
   underlined, and default list bullets. styles.css is the sole stylesheet now. */
a {
    color: inherit;
    text-decoration: none;
}

/* The reset above strips every link's affordance, which is wrong for in-prose links a
   reader has to be able to find — notably the grievance/Ouvidoria form. Those opt back
   into an underline. Kept as an explicit class so nav pills and buttons stay unaffected. */
a.prose-link {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

ul,
ol {
    list-style: none;
}

/* ---------- 2. Layout helpers ---------- */
/* ---------- 2a. Site header & pill buttons ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-secondary);
    padding: 1rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    /* override large container padding for header */
}

.site-header nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    font-weight: 600;
}

.site-header .logo {
    font-size: 1.75rem;
    /* larger */
    font-weight: 800;
    /* heavier */
}

.logo img {
    height: 2.25rem;
}

/* ---------- 2a-mobile. Hamburger + responsive nav ---------- */
.hamburger {
    display: none;
    /* shown only on small screens */
    flex-direction: column;
    gap: 0.25rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.hamburger span {
    width: 1.5rem;
    height: 2px;
    background: var(--color-primary);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* turn into an “X” when menu open */
.nav-open .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-open .hamburger span:nth-child(2) {
    opacity: 0;
}

.nav-open .hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* small-screen behaviour */
@media (max-width: 62.5rem) {
    .hamburger {
        display: flex;
    }

    .site-header nav {
        display: none;
        /* hide links by default */
    }

    .site-header.nav-open nav {
        display: flex;
        /* show when toggled */
        flex-direction: column;
        gap: 1rem;
        position: absolute;
        top: 106.25%;
        /* just below the header */
        right: 1rem;
        background: var(--color-secondary);
        padding: 1rem 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .7);
    }

    .site-header.nav-open nav a {
        white-space: nowrap;
    }
}

.pill {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    /* lozenge shape */
    text-decoration: none;
    border: 2px solid currentColor;
    line-height: 1;
}

.pill--solid {
    background: var(--color-primary);
    color: var(--text-light);
    border-color: var(--color-primary);
}

.pill--outline {
    color: var(--color-primary);
    background: transparent;
}

.pill--solid:hover {
    background: #092f22;
    /* slightly darker green */
}

.pill--outline:hover {
    background: rgba(11, 63, 43, 0.05);
}

.container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: 3rem 1rem;
}

/* ---------- 2b. Hero section ---------- */
.hero {
    position: relative;
    min-height: 80vh;
    /* big, immersive */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 5rem 0 5rem;
    /* extra space above */
    /* mobile breathing room + header overlap */
    color: var(--text-light);
    overflow: hidden;
    border-bottom-right-radius: var(--notch-size);
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* dark overlay for readability */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-bottom-right-radius: inherit;
}

/* tone modifiers for hero image */
.hero--dark {
    color: var(--text-light) !important;
}

.hero--dark .hero-bg {
    filter: brightness(55%);
}

.hero--light {
    color: var(--text-dark) !important;
}

.hero--light .hero-bg {
    filter: brightness(145%);
}

.hero-content {
    position: relative;
    /* sit above overlay */
    z-index: 1;
}

.hero-content h1,
.hero-content h2 {
    font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem);
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: clamp(1.125rem, 2vw + 0.5rem, 1.5rem);
    font-weight: 300;
}

.hero-content p strong {
    font-weight: 600;
}

/* ---------- 3. Content blocks ---------- */
.block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* gives each block some presence */
    transition: background 0.3s ease;
}

/* Even blocks use the primary color as background */
.block:not(.hero):nth-of-type(odd),
.block:not(.hero):nth-of-type(even).reverse {
    background-color: var(--color-primary);
    color: var(--text-light);

    background:
        linear-gradient(rgba(var(--color-primary-rgb), 1), rgba(var(--color-primary-rgb), .8)),
        url('assets/green traces tile 4.png');
    background-repeat: repeat;
    background-size: clamp(200px, 20vw, 300px);
}

/* Odd blocks use the secondary color */
.block:not(.hero):nth-of-type(even),
.block:not(.hero):nth-of-type(odd).reverse {
    background-color: var(--color-secondary);
    color: var(--text-dark);

    background:
        linear-gradient(rgba(250, 245, 224, 0.7), rgba(250, 245, 224, 0.7)),
        url('assets/swirly background 3.png');
    background-repeat: repeat;
    background-size: clamp(300px, 20vw, 400px);
    background-blend-mode: lighten;
}

/* A SPECIAL GRADIENT CHANGE FOR DARK SECTIONS AFTER A HERO */
/* Let the next section sit behind the hero's rounded corner */
.hero+.block:not(.hero) {
    margin-top: calc(-1 * var(--notch-size));
    padding-top: var(--notch-size);
}

.hero+.block:not(.hero).reverse {
    background:
        linear-gradient(rgba(var(--color-primary-rgb), 1) 0%,
            rgba(var(--color-primary-rgb), 1) var(--notch-size),
            rgba(var(--color-primary-rgb), .8) 100%),
        url('/assets/green traces tile 4.png');
    background-repeat: repeat;
    background-size: clamp(200px, 20vw, 300px);
    background-blend-mode: normal;
}


/* Links & buttons that sit on colored backgrounds */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background: var(--color-primary);
    color: var(--text-light);
    transition: background 0.3s ease;
    text-decoration: none;
    border-radius: 0.25rem;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.btn:hover {
    background: #092f22;
}

/* ---------- Block typography polish ---------- */

/* Section headlines (h2) inside .block */
.content-grid h1,
.content-grid h2 {
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    /* a touch larger */
    font-weight: 700;
    /* semibold */
    margin-bottom: 1rem;
    /* space before body text */
    padding-bottom: 0.25rem;
    /* subtle visual anchor */
}

/* Sub-headlines (h3) inside .block */
.content-grid h3 {
    font-size: clamp(1.375rem, 2.5vw + 0.25rem, 1.75rem);
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    /* clear space above & below */
}

/* Paragraph copy inside .block */
.content-grid p {
    margin-bottom: 1rem;
    /* generous spacing between paragraphs */
    line-height: 1.7;
    /* friendlier rhythm */
}

/* --- two-column layout inside .block .container --- */
.block .container {
    display: flex;
    flex-wrap: wrap;
    /* stacks gracefully on narrow viewports */
    gap: 2rem;
    align-items: flex-start;
    /* top-align columns so sidebars size to their own content */
}

/* main copy grows, sidebar fixed at 33 % on desktop */
.block .main {
    flex: 1 1 0;
}

.block .sidebar {
    flex: 1 1 0;
}

.block .container>.content-grid {
    flex: 1 1 100%;
}

@media (max-width: 62.5rem) {

    /* phones & narrow tablets */
    .block .main,
    .block .sidebar {
        flex: 1 1 100%;
    }

    /* full-width stack */
}

/* ---------- 3b. Sidebar polish ---------- */
/* Optional: give the sidebars a little padding & rounded corners */
.sidebar {
    padding: 1.5rem;
    border-radius: 0.75rem;
}

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

.questionnaire p {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    justify-items: center;
}

.questionnaire p a {
    width: 80%;
}

/* alternate which side the sidebar appears on */
.block:nth-of-type(odd) .sidebar,
.block:nth-of-type(even).reverse .sidebar {
    /* background: a light green; */
    background: #092f22
}

/* sidebar on right (default) */
.block:nth-of-type(even) .sidebar,
.block:nth-of-type(odd).reverse .sidebar {
    background: #E9E1C4;
}

.sidebar>*+* {
    margin-top: 1.5rem;
}



.image img {
    width: 100%;
    border-radius: 0.5rem;
}

/* Center image wrapper and its caption */
.image {
    text-align: center;
}

/* Center the whole figure but keep its caption left‑aligned */
.image figure {
    display: inline-block;
    /* allow centering via parent text-align */
    text-align: left;
    /* caption sticks to image's left edge */
}

.image figcaption {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-left: 1rem;
    text-align: left;
}

.quote {
    font-style: italic;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.quote .attribution {
    font-style: normal;
    font-weight: 600;
    margin-top: 0.5rem;
    font-size: 0.9em;
}

/* ---------- 3d. Sidebar form variant ---------- */
.form {
    background: var(--color-secondary);
    padding: 1.5rem;
    border-radius: 0.75rem;
}

.form h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.form label {
    /* display: block; */
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    font-family: inherit;
}

.form button {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-primary);
    color: var(--text-light);
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.form button:hover {
    background: #092f22;
}

/* ---------- 4. Simple responsive polish ---------- */
@media (min-width: 62.5rem) {
    .block {
        flex-direction: row;
        gap: 2rem;
    }

    .block.reverse {
        flex-direction: row-reverse;
    }

    .block>* {
        flex: 1 1 0;
    }

    /* Override block's “flex: 1 1 0” so hero text stays narrow on wide screens */
    @media (min-width: 62.5rem) {
        .hero .hero-content {
            flex: 0 0 60%;
            /* 50 % of the hero width */
            max-width: 60%;
        }
    }
}

.content-grid ul {
    list-style: none;
    /* kill browser bullets          */
    padding-left: 0;
    /* align with paragraph margin   */
    margin-bottom: 1rem;
    /* space after the whole list    */
}

/* Nested ordered list inside .content-grid - use numbers and add spacing */
.content-grid li ol {
    list-style: decimal;
    margin-top: 0.5rem;
    /* more spacing at top of nested list */
    padding-left: 1.5rem;
    /* indent nested list */
}

.content-grid li ol li {
    position: relative;
    padding-left: 0;
    /* no extra padding since numbers are visible */
    margin-bottom: 0.5rem;
    /* spacing between nested items */
    line-height: 1.6;
}

.content-grid li ol li::before {
    content: none;
    /* remove inherited checkmark for nested items */
}

.content-grid li {
    position: relative;
    padding-left: 1.75rem;
    /* room for the check icon       */
    margin-bottom: 0.75rem;
    /* vertical breathing-room       */
    line-height: 1.6;
}

.content-grid li::before {
    content: "✓";
    /* Unicode check mark            */
    position: absolute;
    left: 0;
    top: 0;
    /* nudge down a hair             */
    font-weight: 700;
    font-size: 1rem;
}

.content-grid li.arrow::before {
    content: "→";
}

.stats-content .stat-number {
    font-size: clamp(2rem, 5vw + 1rem, 4rem);
    font-weight: 700;
    line-height: 1;
}

.stats-content .stat-label {
    font-size: clamp(0.875rem, 2vw + 0.5rem, 1.25rem);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
}

/* Override flex container and ensure full-width grid for stats */
.stats-content .container {
    display: block;
}

.stats-content .content-grid {
    width: 100%;
}

.stats-content .stat {
    text-align: center;
    padding: 0 1rem;
}

/* The shared .hero min-height (80vh) leaves too much empty space on the short
   "Impact to Date" stats band; size it to its content + padding instead. */
.hero.stats-content {
    min-height: auto;
}

/* ---------- Scrolling Logo Rows ---------- */
.logo-row {
    position: relative;
    width: 100%;
    height: 100px;
    /* adjust as needed for logo height */
    overflow: hidden;
    margin: 1rem 0;
}

.logo-row .logo-item {
    max-height: 100px;
    width: auto;
}

.logo-row .logo-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    /* one fourth of the row width */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scroll-left var(--logo-duration, 20s) linear;
    opacity: 0;
    padding: 10px 10px;
}

@keyframes scroll-left {
    0% {
        left: 100%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: -350px;
        opacity: 0;
    }
}

/* ---------- GRID COLUMN UTILITIES ---------- */
/* 1. Base grid wrapper */
.content-grid {
    display: grid;
    gap: 1.5rem;
    /* mirrors existing rhythm */
    align-items: start;
    position: relative;
    /* keeps z‑stack behaviour */
    z-index: 1;
    /* sit above any overlays */
}

/* 2. Maximum column counts (desktop & tablet) */
.content-grid.cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.content-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.content-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.content-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 3. Optional per‑item column spans */
.content-grid>.col-span-1 {
    grid-column: span 1;
}

.content-grid>.col-span-2 {
    grid-column: span 2;
}

.content-grid>.col-span-3 {
    grid-column: span 3;
}

.content-grid>.col-span-4 {
    grid-column: span 4;
}

/* 4. Mobile fallback – always collapse to one column */
@media (max-width: 62.5rem) {

    /* Collapse any .content-grid variant to a single column */
    .content-grid,
    .content-grid.cols-1,
    .content-grid.cols-2,
    .content-grid.cols-3,
    .content-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .content-grid>.col-span-1,
    .content-grid>.col-span-2,
    .content-grid>.col-span-3,
    .content-grid>.col-span-4 {
        grid-column: span 1;
    }
}

.constrain-video {
    max-height: 800px;
    width: 100%;
    object-fit: cover;
}

/* ----------  Image height guard  ---------- */
.constrain-image img {
    /* Prevent extremely tall portrait shots on wide screens */
    max-height: clamp(300px, 60vh, 600px);
    width: 100%;
    height: auto;
    object-fit: contain;
    /* crop gracefully if needed */
}

.flip-h {
    transform: scaleX(-1);
    /* mirror left⇄right */
    /* Optional polish */
    transform-origin: center;
    /* keep it mirroring around its midpoint */
}

/* Enforce a square container and make the image cover it */
.square-image {
    position: relative;
    width: 100%;
    /* Create a square by using a padding-bottom trick */
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.square-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

.center-vert {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* ---------- Language toggle ---------- */
.lang-toggle {
    position: relative;
    display: inline-flex;
    border: 2px solid var(--color-primary);
    border-radius: 9999px;
    overflow: hidden;
    line-height: 1;
}

.lang-toggle button {
    background: transparent;
    border: none;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-primary);
    transition: color 0.3s ease;
    z-index: 2;
}

.lang-toggle button.active {
    color: var(--text-light);
}

/* Language pill indicator for lang-toggle */
.lang-indicator {
    position: absolute;
    top: 0;
    left: -4px;
    /* overlap the wrapper’s 2 px border */
    width: calc(50% + 4px);
    /* keep full half‑width plus overlap */
    /* keep full half‑width plus overlap */
    height: 100%;
    background: var(--color-primary);
    border-radius: 9999px;
    z-index: 1;
    display: none;
}

/* Enable smooth slide only after JS adds .animate */
.lang-toggle.animate .lang-indicator {
    display: block;
    transition: transform 0.3s ease;
}

/* imported HubSpot iframe forms have too much top margin ... */
.hs-form-frame {
    margin-top: 0 !important
}