@font-face {
    font-family: 'Font';
    src: url(font/font.TTF);
}

:root {
    --forest: #173B07;
    --forest-deep: #102B05;
    --ink: #20251C;
    --cream: #F3EEE4;
    --cream-soft: #F8F4EC;
    --sand: #E5DCCB;
    --beige: #D6C8B5;
    --sage: #6F7C5A;
    --sage-soft: #A7AD91;
    --terracotta: #A9654F;
    --white-warm: #FFFDF8;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cream);
    color: var(--ink);
    /* font-family: 'Manrope', sans-serif; */
    font-family: 'Font', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.font-serif {
    font-family: 'Cormorant Garamond', serif;
}

/* ---------- reveal system ---------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-34px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(34px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-delay-1 {
    transition-delay: .12s;
}

.reveal-delay-2 {
    transition-delay: .24s;
}

.reveal-delay-3 {
    transition-delay: .36s;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-img,
    .hero-eyebrow,
    .hero-head,
    .hero-sub,
    .hero-cta {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- nav ---------- */
#navbar {
    padding-top: env(safe-area-inset-top, 0px);
    transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
}

#navbar.scrolled {
    background-color: rgba(243, 238, 228, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(23, 59, 7, 0.10);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--ease);
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-primary {
    background: var(--forest);
    color: var(--white-warm);
    transition: background-color .4s var(--ease), transform .3s var(--ease);
}

.btn-primary:hover {
    background: var(--terracotta);
    transform: translateY(-2px);
}

.btn-secondary {
    border: 1px solid var(--forest);
    color: var(--forest);
    transition: background-color .4s var(--ease), color .4s var(--ease);
}

.btn-secondary:hover {
    background: var(--forest);
    color: var(--white-warm);
}

.btn-cream {
    background: var(--cream);
    color: var(--forest);
    transition: background-color .4s var(--ease), color .4s var(--ease), transform .3s var(--ease);
}

.btn-cream:hover {
    background: var(--terracotta);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- hero ---------- */
.hero-img {
    animation: heroImgIn 1.4s var(--ease) forwards;
}

@keyframes heroImgIn {
    from {
        opacity: 0;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-eyebrow {
    opacity: 0;
    animation: fadeUp .8s var(--ease) forwards;
    animation-delay: .15s;
}

.hero-head {
    opacity: 0;
    animation: fadeUp .9s var(--ease) forwards;
    animation-delay: .3s;
}

.hero-sub {
    opacity: 0;
    animation: fadeUp .9s var(--ease) forwards;
    animation-delay: .5s;
}

.hero-cta {
    opacity: 0;
    animation: fadeUp .9s var(--ease) forwards;
    animation-delay: .65s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* organic crop for about image */
.organic-crop {
    border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
    overflow: hidden;
}

/* program cards */
.prog-card {
    transition: transform .5s var(--ease), border-color .5s var(--ease);
}

.prog-card:hover {
    transform: translateY(-6px);
    border-color: var(--forest);
}

.prog-num {
    transition: color .5s var(--ease);
}

.prog-card:hover .prog-num {
    color: var(--terracotta);
}

.prog-arrow {
    transition: transform .4s var(--ease);
    display: inline-block;
}

.prog-card:hover .prog-arrow {
    transform: translateX(5px);
}

/* audience rows */
.aud-row {
    transition: background-color .5s var(--ease);
}

.aud-row:hover {
    background-color: rgba(167, 173, 145, 0.14);
}

.aud-num {
    transition: color .5s var(--ease);
}

.aud-row:hover .aud-num {
    color: var(--terracotta);
}

.aud-text {
    transition: transform .5s var(--ease);
}

.aud-row:hover .aud-text {
    transform: translateX(8px);
}

/* faq */
.faq-item {
    border-bottom: 1px solid rgba(23, 59, 7, 0.18);
}

.faq-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease), opacity .5s var(--ease);
}

.faq-panel.open {
    opacity: 1;
}

.faq-icon {
    transition: transform .4s var(--ease);
}

.faq-icon.open {
    transform: rotate(45deg);
}

/* future vision words */
.pillar {
    transition: color .4s var(--ease), transform .4s var(--ease);
}

.pillar:hover {
    color: var(--terracotta);
    transform: translateX(4px);
}

/* form inputs */
.field-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(243, 238, 228, 0.4);
    color: var(--cream);
    transition: border-color .3s var(--ease);
}

.field-input:focus {
    outline: none;
    border-color: var(--sage-soft);
}

.field-input::placeholder {
    color: rgba(243, 238, 228, 0.45);
}

.field-input-dark {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(23, 59, 7, 0.3);
    color: var(--ink);
    transition: border-color .3s var(--ease);
}

.field-input-dark:focus {
    outline: none;
    border-color: var(--forest);
}

.field-input-dark::placeholder {
    color: rgba(32, 37, 28, 0.4);
}

/* popup */
#popupBackdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ease);
}

#popupBackdrop.show {
    opacity: 1;
    pointer-events: auto;
}

#popupCard {
    transform: translateY(25px) scale(.98);
    opacity: 0;
    transition: transform .6s var(--ease), opacity .6s var(--ease);
}

#popupBackdrop.show #popupCard {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* mobile menu */
#mobileMenu {
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    height: 100vh;
    transform: translateY(-16px);
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: max(88px, calc(env(safe-area-inset-top, 0px) + 76px)) 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}

/* margin:auto on the link wrapper (instead of justify-content:center on the
   parent) keeps the menu visually centered when it fits the screen, but lets
   it sit at the top and scroll normally when the content is taller than the
   viewport — a plain justify-content:center + overflow combo silently clips
   content off the top with no way to scroll to it. */
#mobileMenu .mobile-menu-links {
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
}

#mobileMenu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear 0s;
}

#mobileMenu .mobile-link {
    text-align: center;
    line-height: 1.15;
}

@media (max-width: 359px) {
    #mobileMenu .mobile-link {
        font-size: 1.6rem;
    }
}

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

::selection {
    background: var(--sage-soft);
    color: var(--forest-deep);
}

/* editorial break parallax-ish */
.parallax-img {
    will-change: transform;
}

.fade-in-word {
    display: inline-block;
}

/* =========== CUSTOM CSS */
.nav-logo {
    width: 120px;
    display: flex;
    align-items: center;
}

.nav-logo img {
    filter: brightness(100);
    max-height: 85px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .nav-logo {
        width: 96px;
        padding: 4px 0;
    }

    .nav-logo img {
        max-height: 70px;
    }
}

.scrolled .nav-logo img {
    filter: none;

}

.scrolled nav {
    color: var(--forest);
}

.scrolled a.btn-primary {
    background-color: var(--forest);
    color: var(--cream);
}

.scrolled #menuToggle {
    color: var(--forest);
}

/* ======== sectin edit  */
/* ---------- future vision ---------- */

.future-card {
    transition:
        transform 0.6s var(--ease),
        border-color 0.5s var(--ease),
        box-shadow 0.6s var(--ease),
        background-color 0.5s var(--ease);
}

.future-card:hover {
    transform: translateY(-8px);
    border-color: rgba(23, 59, 7, 0.45);
    box-shadow: 0 22px 45px rgba(16, 43, 5, 0.08);
}

.future-card.sm\:translate-y-10:hover {
    transform: translateY(2px);
}

/* preserve staggered positioning while hovering */
@media (min-width: 640px) {

    .future-card:nth-child(2):hover,
    .future-card:nth-child(4):hover {
        transform: translateY(2px);
    }
}

.future-arrow {
    transition:
        transform 0.5s var(--ease),
        background-color 0.5s var(--ease),
        color 0.5s var(--ease),
        border-color 0.5s var(--ease);
}

.future-number {
    pointer-events: none;
    user-select: none;
}

@media (max-width: 639px) {
    .future-card {
        min-height: 210px;
    }

    .future-card:hover {
        transform: translateY(-5px);
    }
}

/* ======== FAQ SECTION  */
/* =========================================================
   EDITORIAL FAQ
========================================================= */

.faq-item {
    position: relative;
    transition:
        background-color .5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color .5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-btn {
    position: relative;
    transition:
        padding-left .5s cubic-bezier(0.22, 1, 0.36, 1),
        padding-right .5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-btn:hover {
    padding-left: 10px;
    padding-right: 10px;
}

.faq-number {
    transition:
        color .4s ease,
        transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-btn:hover .faq-number {
    color: #A9654F;
    transform: translateX(2px);
}

.faq-question {
    transition:
        color .4s ease,
        transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-btn:hover .faq-question {
    color: #173B07;
    transform: translateX(4px);
}

.faq-icon {
    transition:
        background-color .4s ease,
        color .4s ease,
        border-color .4s ease,
        transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-btn:hover .faq-icon {
    border-color: #173B07;
}

.faq-plus {
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-btn[aria-expanded="true"] .faq-icon {
    background: #173B07;
    color: #F3EEE4;
    border-color: #173B07;
    transform: rotate(45deg);
}

.faq-btn[aria-expanded="true"] .faq-number {
    color: #A9654F;
}

.faq-btn[aria-expanded="true"] .faq-question {
    color: #173B07;
}

.faq-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height .6s cubic-bezier(0.22, 1, 0.36, 1),
        opacity .45s ease;
}

.faq-panel.open {
    opacity: 1;
}

/* subtle active row */
.faq-item:has(.faq-btn[aria-expanded="true"]) {
    background: rgba(167, 173, 145, 0.08);
}

/* mobile */
@media (max-width: 767px) {

    .faq-btn:hover {
        padding-left: 4px;
        padding-right: 4px;
    }

    .faq-question {
        font-size: 1.55rem;
    }

    .faq-btn:hover .faq-question {
        transform: translateX(2px);
    }

}

/* =========================================================
   AUDIENCE SECTION
   ========================================================= */
/* ---------- audience rows ---------- */
.aud-row {
    transition:
        background-color .5s var(--ease),
        padding-left .5s var(--ease),
        padding-right .5s var(--ease);
}

.aud-row:hover {
    background-color: rgba(167, 173, 145, 0.08);
}

.aud-num {
    transition:
        color .5s var(--ease),
        transform .5s var(--ease);
}

.aud-text {
    transition:
        transform .5s var(--ease),
        color .5s var(--ease);
}

/* =========================================================
   ĀDYA SIGN UP FORM — pill-style radio/checkbox inputs
========================================================= */
.adya-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid rgba(23, 59, 7, 0.25);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}

.adya-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.adya-pill:hover {
    border-color: var(--forest);
}

.adya-pill input:checked+span {
    color: var(--white-warm);
}

.adya-pill:has(input:checked) {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--white-warm);
}