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

:root{
    --bg-cream:#F6F1E8;
    --bg-soft:#FBF8F2;
    --forest:#1F3328;
    --forest-2:#2D4638;
    --olive:#5D6F52;
    --brown:#7A5137;
    --gold:#B79B62;
    --text:#233126;
    --text-soft:#5E655B;
    --white:#FFFFFF;
    --shadow:0 12px 32px rgba(0,0,0,0.12);
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    font-family: Inter, Arial, sans-serif;
    background:var(--bg-cream);
    color:var(--text);
    line-height:1.7;
}

a{
    text-decoration:none;
    color:inherit;
}

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

section{
    width:100%;
}

.section-inner{
    width:min(1200px, 92%);
    margin:0 auto;
}

.section-heading{
    text-align:center;
    margin-bottom:56px;
}

.section-heading h2{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(2.2rem, 4vw, 3.2rem);
    font-weight:600;
    letter-spacing:.02em;
    margin-bottom:10px;
}

.section-heading p{
    max-width:720px;
    margin:0 auto;
    font-size:1.05rem;
    color:rgba(255,255,255,0.82);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    padding:14px 24px;
    border-radius:999px;
    border:1.5px solid transparent;
    font-size:0.95rem;
    font-weight:600;
    letter-spacing:.04em;
    transition:all .28s ease;
}

.btn-primary{
    background:var(--forest);
    color:var(--white);
}

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

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

.btn-outline:hover{
    background:var(--forest);
    color:var(--white);
    transform:translateY(-2px);
}

/* Header */
.guidBarFrameWork{
    width:100%;
    height:78px;
    position:fixed;
    top:0;
    left:0;
    z-index:20;
    background:rgba(17,30,22,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav-inner{
    width:min(1240px, 94%);
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.guideBarLogo{
    width:158px;
    height:48px;
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.guideBarLogo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.buttonOuter,
.buttonInter1,
.buttonInter2{
    position:static;
    width:auto;
    height:auto;
}

.buttonOuter{
    display:flex;
    align-items:center;
    gap:18px;
}

.buttonInter1,
.buttonInter2{
    display:flex;
    align-items:center;
    gap:8px;
}

.guideBarButton1,
.guideBarButton2{
    background:transparent;
    color:rgba(255,255,255,0.92);
    width:auto;
    height:auto;
    padding:12px 16px;
    font-size:14px;
    letter-spacing:1.4px;
    font-weight:600;
    border-radius:999px;
    position:relative;
    transition:color .25s ease, background .25s ease;
}

.guideBarButtonText1,
.guideBarButtonText2{
    margin:0;
}

.guideBarButton1::after,
.guideBarButton2::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:8px;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

.guideBarButton1:hover,
.guideBarButton2:hover{
    color:#DDE8D6;
    background:rgba(255,255,255,0.05);
}

.guideBarButton1:hover::after,
.guideBarButton2:hover::after{
    transform:scaleX(1);
}

/* Hero */
.headerImage{
    width:100%;
}

.headerImageFrame{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.BirdsPageHeaderImage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
    transform:scale(1.03);
}

.headerImageOverlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(18, 30, 24, 0.50) 0%,
            rgba(18, 30, 24, 0.22) 42%,
            rgba(18, 30, 24, 0.10) 100%
        );
}

.headerImageContentBox{
    width:min(760px, 90%);
    height:auto;
    position:relative;
    left:auto;
    top:auto;
    margin-left:max(4vw, 32px);
    z-index:2;
    padding-top:88px;
}

.hero-eyebrow{
    display:inline-block;
    margin-bottom:16px;
    color:#E6D4A5;
    font-size:.92rem;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
}

.PageTitle{
    position:static;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(3rem, 7vw, 4.8rem);
    line-height:1.05;
    color:var(--white);
    margin-bottom:18px;
    max-width:720px;
}

.classDescription{
    width:min(640px, 100%);
    position:static;
    font-size:clamp(1.1rem, 2vw, 1.4rem);
    color:rgba(255,255,255,0.92);
    font-family:Inter, Arial, sans-serif;
    font-weight:400;
    line-height:1.6;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:30px;
}

.hero-actions .btn-outline{
    border-color:rgba(255,255,255,0.75);
    color:var(--white);
}

.hero-actions .btn-outline:hover{
    background:rgba(255,255,255,0.12);
    border-color:rgba(255,255,255,0.95);
}

/* About */
.homePageIntroductionSectionFrameWork{
    padding:110px 0;
    background:var(--bg-soft);
}

.about-grid{
    width:min(1220px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:54px;
}

.homePageIntroductionSectionImage{
    width:100%;
    min-height:620px;
    position:relative;
    border-radius:28px;
    background:
        linear-gradient(
            rgba(18,30,24,0.08),
            rgba(18,30,24,0.18)
        ),
        url("HomePageImage/HomePageIntro.jpg")
        70% 0% / 180%
        no-repeat;
    box-shadow:var(--shadow);
}

.homePageIntroductionSectionTextOuter{
    width:100%;
    height:auto;
    background:transparent;
    position:static;
}

.homePageIntroductionSectionTextTitle{
    position:static;
    left:auto;
    top:auto;
    margin-bottom:20px;
}

.homePageIntroductionSectionTextTitle .kicker{
    color:var(--gold);
    font-size:.95rem;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:14px;
}

.homePageIntroductionSectionTextTitle h2{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(2.2rem, 4vw, 3.1rem);
    line-height:1.1;
    color:var(--forest);
    margin-bottom:10px;
}

.homePageIntroductionSectionTextTitle .subheading{
    color:var(--text-soft);
    font-size:1.1rem;
}

.homePageIntroductionSectionTextContent{
    width:100%;
    height:auto;
    position:static;
}

.homePageIntroductionSectionText{
    line-height:1.85;
    font-size:1.05rem;
    font-family:Inter, Arial, sans-serif;
    font-weight:400;
    color:var(--text);
}


.homePageIntroductionSectionTextLink{
    display:inline-block;
    width:auto;
    height:auto;
    background:transparent;
    position:static;
    transform:none;
    border:none;
    box-shadow:none;
    margin-top:36px;
}

.homePageIntroductionSectionLinkButton{
    margin:0;
}

/* Projects */
.homePageProjectFrame{
    padding:110px 0 120px;
    min-height:auto;
    background:var(--bg-cream);
}

.homePageProjectTitle{
    width:min(1160px, 92%);
    height:auto;
    margin:0 auto 56px;
}

.homePageProjectTitleMainText,
.homePageProjectTitleSubText{
    position:static;
    text-align:center;
}

.homePageProjectTitleMainText{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(2.2rem, 4vw, 3.2rem);
    margin-bottom:12px;
    color:var(--forest);
}

.homePageProjectTitleSubText{
    font-size:1.05rem;
    color:var(--text-soft);
    max-width:760px;
    margin:0 auto;
}

.project-grid{
    width:min(1200px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
}

.homePageProjectOuter{
    width:100%;
    height:auto;
    position:static;
    float:none;
}

.homePageProjectContent{
    width:100%;
    min-height:620px;
    background:#FAF8F2;
    position:relative;
    border-radius:28px;
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform .28s ease, box-shadow .28s ease;
    padding-bottom:88px;
}

.homePageProjectContent:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 36px rgba(0,0,0,0.14);
}

.homePageProjectContent{
    width:100%;
    min-height:620px;
    background:#FAF8F2;
    position:relative;
    border-radius:28px;
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform .28s ease, box-shadow .28s ease;
    padding-top:300px;
    padding-bottom:88px;
}

.homePageProjectContent::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:300px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.project-exploration::before{
    background-size:160%;
    background-position:70% center;
    background-image:url("HomePageImage/HomePageActivityImage.JPG");
}

.project-volunteer::before{
    background-image:url("HomePageImage/HomePageVolunteerImage.JPG");
    background-size:130%;
    background-position:35% 45%;
    filter:brightness(1.12) contrast(1.04);
}

.project-research::before{
    background-image:url("HomePageImage/HomePageResearcgImage.jpg");
    filter:brightness(0.90) contrast(1.04);
}

.projectTag{
    display:inline-block;
    margin:26px 32px 0;
    color:var(--gold);
    font-size:.82rem;
    letter-spacing:1.8px;
    text-transform:uppercase;
    font-weight:700;
}

.projectTitle{
    position:static;
    margin:10px 32px 12px;
    font-size:1.8rem;
    color:var(--forest);
    font-family:"Cormorant Garamond", Georgia, serif;
}

.projectText{
    width:auto;
    position:static;
    margin:0 32px 28px;
    font-size:1rem;
    line-height:1.8;
    font-family:Inter, Arial, sans-serif;
    font-weight:400;
    color:var(--text-soft);
    min-height:132px;
}

.homePageProjectLink{
    position:absolute;
    left:32px;
    bottom:32px;

    width:auto;
    height:auto;
    background:transparent;
    font-size:1rem;
    border:none;
    box-shadow:none;
    margin:0;
}

.homePageProjectLinkButton{
    margin:0;
}

/* Species */
.HomePageSpeciesExhibitionFrame{
    min-height:auto;
    position:relative;
    background:linear-gradient(180deg, #1B2A22 0%, #263C31 100%);
    padding:110px 0;
}

.HomePageSpeciesExhibitionHeader{
    width:min(1160px, 92%);
    height:auto;
    margin:0 auto 54px;
    background:transparent;
}

.HomePageSpeciesExhibitionMainTitle,
.HomePageSpeciesExhibitionSubTitle{
    position:static;
    display:block;
    text-align:center;
}

.HomePageSpeciesExhibitionMainTitle{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(2.2rem, 4vw, 3.2rem);
    color:var(--white);
    margin-bottom:12px;
}

.HomePageSpeciesExhibitionSubTitle{
    font-size:1.05rem;
    color:rgba(255,255,255,0.82);
    max-width:760px;
    margin:0 auto;
}

.species-list{
    width:min(1200px, 92%);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:26px;
}

.HomePageSpeciesExhibitionOuter{
    width:100%;
    height:380px;
    position:relative;
    border-radius:30px;
    overflow:hidden;
    background:#F2EFE7;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    box-shadow:var(--shadow);
}

.HomePageSpeciesExhibitionOuter.reverse{
    grid-template-columns:.95fr 1.05fr;
}

.HomePageSpeciesExhibitionLeftVersionContent,
.HomePageSpeciesExhibitionRightVersionContent{
    width:100%;
    height:100%;
    background:#F2EFE7;
    position:static;
    padding:42px 42px 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.speciesLeftVersionTitle,
.speciesRightVersionTitle{
    position:static;
    text-align:left;
    color:var(--forest);
    font-size:2.2rem;
    font-family:"Cormorant Garamond", Georgia, serif;
    margin-bottom:10px;
}

.species-meta{
    color:var(--gold);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:1.7px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.speciesLeftVersionContent,
.speciesRightVersionContent{
    position:static;
    width:100%;
    height:auto;
    font-size:1rem;
    color:var(--text-soft);
    line-height:1.8;
    font-family:Inter, Arial, sans-serif;
    font-weight:400;
}

.SpeciesExhibitionLeftVersionLink,
.SpeciesExhibitionRightVersionLink{
    width:auto;
    height:auto;
    background:transparent;
    position:static;
    font-size:1rem;
    color:inherit;
    text-align:left;
    margin-top:26px;
}

.SpeciesExhibitionLeftVersionLinkButton,
.SpeciesExhibitionRightVersionLinkButton{
    margin:0;
}

.homePageSpeciesExhibitionLeftVersionImage1,
.homePageSpeciesExhibitionLeftVersionImage2,
.homePageSpeciesExhibitionLeftVersionImage3,
.homePageSpeciesExhibitionRightVersionImage1,
.homePageSpeciesExhibitionRightVersionImage2{
    width:100%;
    height:380px;
    position:static;
}

.HomePageSpeciesExhibitionLeftVersionContent,
.HomePageSpeciesExhibitionRightVersionContent{
    width:100%;
    height:100%;
    background:#F2EFE7;
    position:static;
    padding:42px 42px 36px;
    display:flex;
    flex-direction:column;
}

.SpeciesExhibitionLeftVersionLink,
.SpeciesExhibitionRightVersionLink{
    margin-top:auto;
    padding-top:24px;
}

.homePageSpeciesExhibitionLeftVersionImage1{
    background:url("HomePageImage/MammalFrontImage.png") center center/cover no-repeat;
}

.homePageSpeciesExhibitionLeftVersionImage2{
    background:url("HomePageImage/InsectFrontImage.png") center center/cover no-repeat;
}

.homePageSpeciesExhibitionRightVersionImage1{
    background:url("HomePageImage/BirdFrontImage.png") center center/cover no-repeat;
}

.homePageSpeciesExhibitionRightVersionImage2{
    background:url("HomePageImage/ReptileFrontImage.png") center center/cover no-repeat;
    background-position:center 35%;
}

.homePageSpeciesExhibitionLeftVersionImage1,
.homePageSpeciesExhibitionLeftVersionImage2,
.homePageSpeciesExhibitionRightVersionImage1,
.homePageSpeciesExhibitionRightVersionImage2{
    background-color:#000;
    background-size:contain;
}

.speciesMammalLinkButtonImage,
.speciesInsectLinkButtonImage,
.speciesAphibianLinkButtonImage,
.speciesBirdLinkButtonImage{
    display:none;
}

/* Journal */
.homePageRecordingSectionFrame{
    min-height:auto;
    position:relative;
    background:var(--bg-soft);
    padding:110px 0;
}

.journal-grid{
    width:min(1200px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    gap:30px;
    align-items:stretch;
}

.homePageRecordingSectionTextSection{
    width:100%;
    height:auto;
    position:static;
    background:#EFE7D7;
    border-radius:30px;
    padding:44px 40px;
}

.homePageRecordingSectionMainTitle,
.homePageRecordingSectionText{
    position:static;
    text-align:left;
}

.homePageRecordingSectionMainTitle{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(2.2rem, 4vw, 3rem);
    color:var(--forest);
    margin-bottom:14px;
}

.homePageRecordingSectionText{
    font-size:1rem;
    color:var(--text-soft);
    line-height:1.8;
}

.journal-feature-list{
    margin:28px 0 30px;
    display:grid;
    gap:12px;
}

.journal-feature-item{
    background:rgba(255,255,255,0.6);
    border-radius:16px;
    padding:14px 16px;
    border:1px solid rgba(31,51,40,0.08);
}

.journal-feature-item strong{
    display:block;
    color:var(--forest);
    margin-bottom:4px;
}

.homePageRecordingSectionImage{
    width:100%;
    height:100%;
    min-height:560px;
    position:relative;
    background:
        linear-gradient(
            rgba(18,30,24,0.10),
            rgba(18,30,24,0.28)
        ),
        url("RecordingSection.png") center center/cover no-repeat;
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.image-overlay-card{
    position:absolute;
    right:24px;
    bottom:24px;
    width:min(350px, calc(100% - 48px));
    background:rgba(17,30,22,0.78);
    color:var(--white);
    padding:20px 22px;
    border-radius:20px;
    backdrop-filter:blur(8px);
}

.image-overlay-card h4{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:1.7rem;
    margin-bottom:8px;
}

.image-overlay-card p{
    color:rgba(255,255,255,0.86);
    font-size:.98rem;
}

.homePageRecordingSectionTextLink{
    width:auto;
    height:auto;
    background:transparent;
    position:static;
    left:auto;
    bottom:auto;
    transform:none;
    border:none;
    box-shadow:none;
}

.homePageRecordingSectionLinkButton{
    margin:0;
}

/* Footer */
.footerFrame{
    width:100%;
    min-height:auto;
    position:relative;
    background:linear-gradient(180deg, #101913 0%, #16231B 100%);
    padding:72px 0 48px;
    border-top:1px solid rgba(183,155,98,0.28);
}

.footer-inner{
    width:min(1200px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr .7fr .95fr;
    gap:36px;
}

.footerLogo{
    width:205px;
    height:88px;
    position:static;
    margin-bottom:18px;
}

.footerLogo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.footerLogoText{
    width:auto;
    height:auto;
    position:static;
    color:rgba(255,255,255,0.8);
    font-size:1rem;
}

.footer-about p{
    color:rgba(255,255,255,0.8);
    max-width:360px;
    margin-top:14px;
}

.footer-col h4{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:2rem;
    color:var(--white);
    margin-bottom:16px;
}

.footer-links a,
.footer-contact p{
    display:block;
    color:rgba(255,255,255,0.8);
    margin-bottom:12px;
}

.footer-links a:hover{
    color:#E3D0A1;
}

.footerContactouter{
    width:auto;
    height:auto;
    position:static;
}

.footerContactTitle,
.footerContactLinkbuttton,
.email,
.phoneNumber1,
.phoneNumber2{
    position:static;
}

.footer-socials{
    display:flex;
    gap:14px;
    margin:18px 0 22px;
}

.footerContactLinkbuttton{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    transition:transform .25s ease, background .25s ease;
    margin-right:0;
}

.footerContactLinkbuttton:hover{
    transform:translateY(-2px) scale(1.05);
    background:rgba(183,155,98,0.2);
}

.footerContactLogo{
    width:22px;
    height:22px;
    object-fit:contain;
}

.footer-bottom{
    width:min(1200px, 92%);
    margin:32px auto 0;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.62);
    font-size:.95rem;
}

/* Responsive */
@media screen and (max-width: 1080px){
    .about-grid,
    .journal-grid,
    .footer-inner{
        grid-template-columns:1fr;
    }

    .project-grid{
        grid-template-columns:1fr;
    }

    .HomePageSpeciesExhibitionOuter{
        grid-template-columns:0.9fr 1.1fr;
        height:340px;
    }

    .HomePageSpeciesExhibitionOuter.reverse{
        grid-template-columns:1.1fr 0.9fr;
    }

    .HomePageSpeciesExhibitionLeftVersionContent,
    .HomePageSpeciesExhibitionRightVersionContent{
        padding:32px 30px;
    }

    .speciesLeftVersionTitle,
    .speciesRightVersionTitle{
        font-size:1.9rem;
    }

    .homePageIntroductionSectionImage,
    .homePageRecordingSectionImage{
        min-height:420px;
    }
}

@media screen and (max-width: 820px){
    .guidBarFrameWork{
        height:auto;
        padding:14px 0;
    }

    .nav-inner,
    .buttonOuter{
        flex-direction:column;
        align-items:flex-start;
    }

    .buttonInter1,
    .buttonInter2{
        flex-wrap:wrap;
    }

    .headerImageFrame{
        min-height:820px;
    }

    .headerImageContentBox{
        margin-left:24px;
        width:calc(100% - 48px);
    }

    .about-highlights{
        grid-template-columns:1fr;
    }

    .projectText{
        min-height:auto;
    }
}


@media screen and (max-width: 700px){
    .HomePageSpeciesExhibitionOuter,
    .HomePageSpeciesExhibitionOuter.reverse{
        grid-template-columns:1fr;
        height:auto;
    }

    .homePageSpeciesExhibitionLeftVersionImage1,
    .homePageSpeciesExhibitionLeftVersionImage2,
    .homePageSpeciesExhibitionRightVersionImage1,
    .homePageSpeciesExhibitionRightVersionImage2{
        height:240px;
        min-height:240px;
    }
}

@media screen and (max-width: 560px){

    .guideBarButton1,
    .guideBarButton2{
        padding:10px 12px;
        font-size:13px;
    }

    .homePageIntroductionSectionFrameWork,
    .homePageProjectFrame,
    .HomePageSpeciesExhibitionFrame,
    .homePageRecordingSectionFrame{
        padding:84px 0;
    }

    .homePageIntroductionSectionImage,
    .homePageRecordingSectionImage,
    .HomePageSpeciesExhibitionOuter,
    .homePageSpeciesExhibitionLeftVersionImage1,
    .homePageSpeciesExhibitionLeftVersionImage2,
    .homePageSpeciesExhibitionLeftVersionImage3,
    .homePageSpeciesExhibitionRightVersionImage1,
    .homePageSpeciesExhibitionRightVersionImage2{
        min-height:280px;
    }

    .HomePageSpeciesExhibitionLeftVersionContent,
    .HomePageSpeciesExhibitionRightVersionContent,
    .homePageRecordingSectionTextSection{
        padding:28px 24px;
    }
}