/* styles.css - Vanilla CSS adapted from your theme variables and layout.
   Adjust colors or spacing as needed. */

:root {
    --bg: #f9f9f4;
    --fg: #0f2f21;
    /* dark green / near black */
    --primary: #2e5c45;
    --primary-foreground: #fff;
    --secondary: #d4e0d9;
    --muted: #94a49a;
    --accent: #d9a528;
    --card: #ffffff;
    --border: #e6ece6;
    --radius: 8px;
    --container: 1100px;
    --shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
}

body.site-bg {
    margin: 0;
    font-family: Inter, "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.45;
}

/* Container */
.container {
    width: 92%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem 0;
}

/* Header */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 60;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 72px;
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.logo-circle {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-foreground);
    font-weight: 700;
    box-shadow: var(--shadow);
}

.brand-title {
    margin: 0;
    font-size: 1.1rem;
}

.brand-sub {
    font-size: .65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Nav */
.nav-desktop {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-desktop a {
    color: var(--fg);
    text-decoration: none;
    padding: .35rem .6rem;
    border-radius: 6px;
}

.nav-desktop a:hover {
    color: var(--primary);
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
}

/* Mobile nav panel */
.mobile-nav {
    display: none;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 1rem;
}

.mobile-nav a {
    display: block;
    padding: .6rem 0;
    color: var(--fg);
    text-decoration: none;
}

/* Hero */
.hero {
    padding: 3.5rem 0;
    background: var(--card);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 2rem;
    align-items: center;
}

.hero-title {
    font-size: 2.5rem;
    margin: 0 0 .5rem;
}

.hero-sub {
    font-size: 1.35rem;
    margin: 0 0 1rem;
    color: var(--muted);
}

.lead {
    color: var(--muted);
    max-width: 50ch;
}

.badge {
    display: inline-block;
    padding: .35rem .6rem;
    background: rgba(45, 91, 69, 0.12);
    color: var(--primary);
    font-weight: 700;
    border: 1px solid rgba(45, 91, 69, 0.08);
    border-radius: 999px;
    font-size: .75rem;
    margin-bottom: 1rem;
}

.hero-ctas {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
}

.btn {
    padding: .6rem .9rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
}

.btn.large {
    padding: .9rem 1.25rem;
    font-weight: 700;
}

.btn.primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: rgba(0, 0, 0, 0.03);
}

.btn.outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

/* Illustration */
.hero-illustration {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* Sections */
.section {
    padding: 3rem 0;
}

.bg-secondary-light {
    background: linear-gradient(180deg, rgba(212, 224, 217, 0.6), var(--bg));
}

.bg-muted {
    background: rgba(0, 0, 0, 0.02);
}

.bg-muted-light {
    background: rgba(0, 0, 0, 0.015);
}

/* Grid utilities */
.grid {
    display: grid;
}

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

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

.gap {
    gap: 1rem;
}

@media (max-width:900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .md-3 {
        grid-template-columns: 1fr;
    }

    .menu-toggle {
        display: inline-block;
    }

    .nav-desktop {
        display: none;
    }

   
}

/* show mobile nav only when .open is present on small screens */
@media (max-width:900px) {
  .mobile-nav {
    display: none; /* default hidden on mobile */
  }

  .mobile-nav.open {
    display: block; /* visible only when JS adds .open */
  }

  /* optionally make the mobile nav full-width / overlay */
  .mobile-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px; /* adjust if header height differs */
    background: var(--card, #fff);
    z-index: 80;
    padding: 1rem;
    box-shadow: 0 12px 28px rgba(15,23,42,0.08);
  }
}

/* Cards */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: center;
}

.icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(217, 165, 40, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

/* Features */
.feature-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 1.25rem;
    border-radius: 12px;
}

.feature-ico {
    font-size: 1.6rem;
    margin-bottom: .5rem;
}

/* Map */
.map-card {
    background: var(--card);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.map-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* two-column illustrations */
.two-col {
    display: flex;
    gap: 2rem;
}

.illustration-card {
    background: var(--card);
    padding: 1.25rem;
    border-radius: 12px;
    flex: 1;
    text-align: center;
}

/* Legend dots */
.legend {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.25rem;
}

.legend li {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    color: var(--muted);
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: .5rem;
}

.dot.green {
    background: #16a34a;
}

.dot.yellow {
    background: #f59e0b;
}

.dot.red {
    background: #ef4444;
}

/* Accordion */
.accordion {
    margin-top: 1rem;
}

.accordion-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: .6rem;
    background: var(--card);
}

.accordion-toggle {
    width: 100%;
    text-align: left;
    padding: 1rem;
    background: transparent;
    border: 0;
    font-weight: 700;
    cursor: pointer;
}

.accordion-panel {
    padding: 0 1rem 1rem;
    color: var(--muted);
    display: none;
}

/* Footer */
.site-footer {
    background: var(--secondary);
    color: var(--primary);
    padding: 2rem 0 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.footer-bottom {
    margin-top: 1rem;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

@media (max-width:700px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .two-col {
        flex-direction: column;
    }
}

/* small utility */
.text-center {
    text-align: center;
}

.muted {
    color: var(--muted);
}


/* Responsive inline illustration cards */
.two-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card base */
.illustration-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* Image styling */
.illustration-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    max-width: 640px;
    /* prevents extremely large images */
}

/* Text content inside card */
.illustration-content {
    text-align: center;
}

/* Larger screens: show two-col inline and image/text side-by-side */
@media (min-width: 900px) {
    .two-col {
        flex-direction: row;
    }

    .illustration-card {
        flex: 1 1 0;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 1.25rem;
    }

    .illustration-img {
        width: 48%;
        /* image takes roughly half of card */
        max-width: none;
        /* let flex govern size */
        border-radius: 10px;
    }

    .illustration-content {
        width: 52%;
        text-align: left;
    }
}

/* Small tweak for very narrow images: center content */
@media (max-width: 420px) {
    .illustration-card {
        padding: .75rem;
    }
}

/* Map grid layout */
.map-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
    align-content: start;
}

/* map info and visual blocks */
.map-info {
    order: 1;
}

.map-visual {
    order: 2;
}

/* Map card styling */
.map-card {
    background: var(--card);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* responsive image */
.map-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}

/* Legend list spacing */
.legend {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    display: grid;
    gap: 0.5rem;
}

.legend li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted);
}

/* Larger screens: two-column grid, visual on the right */
@media (min-width: 900px) {
    .map-grid {
        grid-template-columns: 1fr 520px;
        /* left content and fixed-ish map column */
        align-items: center;
        gap: 2rem;
    }

    /* ensure visual/content alignment */
    .map-info {
        padding-right: 0.5rem;
    }

    .map-visual {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* limit map size inside the map column */
    .map-card {
        width: 100%;
        max-width: 520px;
        padding: 1.25rem;
    }
}

/* Optional: swap order on very wide screens (if you want the map left) */
/* @media (min-width: 1200px) {
  .map-info { order: 2; }
  .map-visual { order: 1; }
} */

/* Add these styles to your main stylesheet (or include as a separate file).
   These mirror the boxed cards and small icon badges from your screenshot. */

/* Grid layout */
.features-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* Cards */
.feature-card {
    background: var(--card, #fff);
    border: 1px solid rgba(139, 154, 144, 0.18);
    /* subtle greenish border */
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease;
    min-height: 120px;
}

/* Hover lift */
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

/* Small square badge with icon */
.feature-badge {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(46, 92, 69, 0.06);
    /* very light primary tint */
    color: var(--primary, #2e5c45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(46, 92, 69, 0.06);
}

/* SVG inside badge */
.feature-svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    color: var(--primary, #2e5c45);
}

/* Title & description */
.feature-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--fg, #0f2f21);
    font-weight: 700;
}

.feature-desc {
    margin: 0;
    color: var(--muted, #6b7b6f);
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Make badge appear top-left inside card (like screenshot) */
.feature-card .feature-badge {
    position: absolute;
    left: 20px;
    top: 20px;
}

/* When badge is absolute, add left padding to avoid overlap of title */
.feature-card .feature-title,
.feature-card .feature-desc {
    margin-left: 84px;
    /* badge width (44) + left spacing (20*2) - adjust as needed */
}

/* Responsive: 2 columns */
@media (min-width: 700px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* Responsive: 3 columns */
@media (min-width: 1100px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small screens: reduce left margin so content stays readable */
@media (max-width: 420px) {
    .feature-card {
        padding: 1rem;
    }

    .feature-card .feature-title,
    .feature-card .feature-desc {
        margin-left: 64px;
    }

    .feature-badge {
        width: 40px;
        height: 40px;
        left: 16px;
        top: 16px;
    }

    .feature-svg {
        width: 18px;
        height: 18px;
    }
}

/* Paste into your main stylesheet or include as a separate file.
   Uses theme variables if available; fallback values provided. */

:root {
    --primary: #2e5c45;
    --muted: #6b7b6f;
    --card-bg: #ffffff;
    --card-border: rgba(46, 92, 69, 0.06);
    --pink-bg: rgba(249, 207, 210, 0.45);
    /* soft pink for icon circle */
}

/* Section spacing & header */
.challenge-section .section-title {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    font-weight: 800;
}

/* Grid layout: 1 column mobile, 2 columns tablet, 4 columns desktop */
.challenge-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: center;
    margin: 0 auto 1.5rem;
    width: 100%;
    max-width: 1200px;
    padding: 0 1rem;
}

/* Card */
.challenge-card {
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--card-border);
    padding: 2.25rem 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    width: 100%;
    max-width: 280px;
    /* card width to match screenshot feel */
    box-sizing: border-box;
    text-align: left;
    position: relative;
    transition: transform .16s ease, box-shadow .16s ease;
    min-height: 150px;
    overflow: visible;
}

/* Hover/lift */
.challenge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

/* Icon circle (centered horizontally inside card like screenshot) */
.icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--pink-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff4757;
    /* icon color (pink/red) */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -28px;
    /* overlap card edge */
    border: 1px solid rgba(255, 71, 87, 0.08);
}

/* SVG sizing */
.icon {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    display: block;
}

/* Titles and descriptions */
.card-title {
    margin-top: 1.25rem;
    /* push down under the floating icon */
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    color: var(--primary);
    font-weight: 700;
}

.card-desc {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    font-size: 0.95rem;
}

/* CTA under the grid */
.challenge-cta {
    margin-top: 2rem;
    font-weight: 800;
    color: var(--primary);
    font-size: 1.25rem;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 3px;
    display: inline-block;
}

/* Responsive breakpoints */
@media (min-width: 700px) {
    .challenge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .challenge-card {
        max-width: none;
    }
}

@media (min-width: 1100px) {
    .challenge-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.75rem;
    }
}

/* Small screen tweaks */
@media (max-width: 420px) {
    .icon-wrap {
        width: 48px;
        height: 48px;
        top: -24px;
    }

    .icon {
        width: 22px;
        height: 22px;
    }

    .challenge-card {
        padding: 1.75rem 1rem 1rem;
        min-height: 130px;
    }

    .card-title {
        margin-top: 1rem;
        font-size: 1rem;
    }
}

/** faq **/
/* Accordion styles */
.accordion {
    max-width: 920px;
    margin: 0 auto;
}

/* Item */
.accordion-item {
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

/* Header button */
.accordion-header {
    margin: 0;
}

.accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--fg, #0f2f21);
    cursor: pointer;
    border-radius: 12px;
    transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

/* When expanded, slightly different style */
.accordion-toggle[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(46, 92, 69, 0.02), rgba(46, 92, 69, 0.01));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

/* Chevrons rotate on open */
.accordion-chevron {
    transition: transform .22s ease;
    color: var(--muted, #6b7b6f);
}

.accordion-toggle[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
}

/* Panel base: use height animation */
.accordion-panel {
    background: transparent;
    border: 1px solid transparent;
    padding: 0 1.25rem;
    color: var(--muted, #6b7b6f);
    line-height: 1.6;
    font-size: 0.98rem;
    overflow: hidden;
    transition: height 260ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease;
    will-change: height, opacity;
    opacity: 0;
    height: 0;
    border-radius: 0 0 12px 12px;
}

/* When panel is open, JS will set inline height and remove hidden attr; set opacity to 1 */
.accordion-panel[aria-hidden="false"] {
    opacity: 1;
}

/* Add a small gap between header and the visible panel border to make it appear unified */
.accordion-item+.accordion-item {
    margin-top: 0.5rem;
}

/* Small screens tweaks */
@media (max-width: 720px) {
    .accordion-toggle {
        padding: 0.9rem 1rem;
        font-size: 0.98rem;
    }

    .accordion-panel {
        padding: 0 1rem 1rem;
        font-size: 0.95rem;
    }
}


/* CTA section (standalone) */
/* Add to your main stylesheet or include as a separate file and link it before the footer. */

.cta-section {
    padding: 4.5rem 0;
    background: var(--card, #ffffff);
    color: var(--fg, #0f2f21);
}

.cta-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary, #2e5c45);
    margin: 0 0 0.75rem;
    text-align: center;
}

.cta-sub {
    color: var(--muted, #6b7b6f);
    max-width: 62ch;
    margin: 0 auto 1.75rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* CTA buttons row */
.cta-actions {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
}

/* Reuse existing btn styles with CTA sizing tweaks */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.25rem;
    border-radius: 8px;
    font-weight: 700;
    min-width: 165px;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Primary filled */
.btn-cta.primary {
    background: var(--primary, #2e5c45);
    color: var(--primary-foreground, #fff);
    border: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.btn-cta.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

/* Outline */
.btn-cta.outline {
    background: transparent;
    color: var(--primary, #2e5c45);
    border: 2px solid rgba(46, 92, 69, 0.12);
}

.btn-cta.outline:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

/* Responsive: stack buttons on narrow screens */
@media (max-width: 520px) {
    .cta-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        max-width: 320px;
        margin: 1rem auto 0;
    }

    .btn-cta {
        width: 100%;
        min-width: unset;
    }
}



/* footer */

/* Footer styles - paste into your main stylesheet or include separately */

/* Fallback variables (your theme may already define these) */
:root {
    --footer-bg: #dfece6;
    /* soft sage background */
    --footer-foreground: #123225;
    /* dark green text */
    --footer-muted: rgba(15, 23, 42, 0.6);
    --card: #ffffff;
    --border: rgba(0, 0, 0, 0.06);
    --radius: 10px;
    --container: 1100px;
}

.site-footer {
    background: var(--footer-bg);
    color: var(--footer-foreground);
    padding: 2.25rem 0 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.02);
}

.site-footer .container {
    max-width: var(--container);
    width: 92%;
    margin: 0 auto;
}

/* Top area: brand + nav */
.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem 0 1.5rem;
}

/* Brand column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.logo-square {
    width: 40px;
    height: 40px;
    background: var(--primary, #2e5c45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.brand-text {
    display: inline-block;
    margin-top: 0.35rem;
}

.brand-name {
    font-weight: 800;
    color: var(--footer-foreground);
    font-size: 1rem;
}

.brand-sub {
    font-size: 0.75rem;
    color: var(--footer-muted);
    margin-top: -0.2rem;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.brand-desc {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: var(--footer-muted);
    max-width: 32rem;
}

/* Footer navigation columns */
.footer-nav {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
    align-items: start;
}

/* Each column */
.footer-col {
    min-width: 140px;
}

.footer-col h4 {
    margin: 0 0 0.6rem 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--footer-foreground);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--footer-muted);
}

.footer-col li {
    margin: 0.5rem 0;
}

.footer-col a {
    color: var(--footer-muted);
    text-decoration: none;
}

.footer-col a:hover {
    color: var(--footer-foreground);
    text-decoration: underline;
}

/* Contact column specifics */
.contact-col .contact-line {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    color: var(--footer-muted);
}

.icon-inline {
    display: inline-block;
    color: var(--footer-muted);
    opacity: 0.9;
}

/* Bottom row */
.footer-bottom {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding: 1rem 0 0;
    margin-top: 1rem;
    color: var(--footer-muted);
    font-size: 0.9rem;
}

.footer-legal a {
    color: var(--footer-muted);
    text-decoration: none;
    margin: 0 0.5rem;
}

.footer-legal a:hover {
    text-decoration: underline;
    color: var(--footer-foreground);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1rem;
    }

    .brand-desc {
        max-width: 100%;
    }

    .footer-col {
        min-width: 120px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: .6rem;
        text-align: center;
    }
}

/* waitlist */

/* Waitlist styles — add to your main styles or include separately */

/* layout */
.waitlist-section {
    padding: 3rem 0;
    background: var(--card, #ffffff);
}

.waitlist-inner {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.waitlist-copy {
    flex: 1 1 360px;
    min-width: 220px;
}

.waitlist-copy .section-title {
    margin-bottom: 0.5rem;
    color: var(--primary, #2e5c45);
}

.waitlist-copy .muted {
    color: var(--muted, #6b7b6f);
    margin: 0;
}

/* form */
.waitlist-form {
    flex: 1 1 420px;
    min-width: 260px;
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
}

.form-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.form-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    background: var(--card, #fff);
    font-size: 0.98rem;
    color: var(--fg, #0f2f21);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.03);
}

.form-input:focus {
    outline: 3px solid rgba(46, 92, 69, 0.08);
    border-color: rgba(46, 92, 69, 0.12);
}

/* action row */
.actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.btn {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    font-weight: 700;
}

.btn-primary {
    background: var(--primary, #2e5c45);
    color: #fff;
    border: 0;
    box-shadow: 0 12px 24px rgba(46, 92, 69, 0.06);
}

.btn-outline {
    background: transparent;
    color: var(--primary, #2e5c45);
    border: 1px solid rgba(46, 92, 69, 0.12);
}

/* status */
.form-status {
    margin-top: 0.6rem;
    min-height: 1.2rem;
    color: var(--muted, #6b7b6f);
    font-size: 0.95rem;
}

/* small screen */
@media (max-width:900px) {
    .waitlist-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .actions {
        flex-direction: row;
    }
}

/* visually-hidden utility */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}