*{
    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 14px 38px rgba(0,0,0,0.13);
    --shadow-soft:0 8px 24px rgba(0,0,0,0.08);
}

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

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

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
section, footer{ width:100%; }

.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:.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{ background:transparent; color:var(--forest); border-color:var(--forest); }
.btn-outline:hover{ background:var(--forest); color:var(--white); transform:translateY(-2px); }

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

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

.intro-title{
    font-size:clamp(2.7rem, 3vw, 3.5rem);
    line-height:1.06;
    max-width:780px;
}

.section-subtitle{
    display:inline-block;
    margin-bottom:22px;
    color:var(--gold);
    font-size:.92rem;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
}

/* 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 */
.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 28%;
    transform:scale(1.08);
}

.headerImageOverlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(18,30,24,.62) 0%, rgba(18,30,24,.28) 42%, rgba(18,30,24,.12) 100%),
        linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.26) 100%);
}
.headerImageContentBox{
    width:min(760px, 90%);
    position:relative;
    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{
    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:760px;
}
.classDescription{
    width:min(680px, 100%);
    font-size:clamp(1.08rem, 2vw, 1.35rem);
    color:rgba(255,255,255,0.92);
    line-height:1.65;
}
.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); }

/* Intro */
.intro-section,
.location-section,
.history-section,
.stats-section{ padding:118px 0; }
.intro-section{ background:linear-gradient(180deg, var(--bg-soft) 0%, #F8F4EC 100%); }
.location-section,
.history-section{ background:var(--bg-soft); }
.stats-section{ background:var(--bg-cream); }

.intro-grid{
    width:min(1180px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:42px;
}
.intro-image{
    min-height:560px;
    border-radius:30px;
    box-shadow:var(--shadow);
    background:
        linear-gradient(rgba(15,25,18,.05), rgba(15,25,18,.14)),
        url("IntroductionPageImage/first_section.jpg")
        65% 54% / 140%
        no-repeat;
}

.intro-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:620px;
}
.intro-copy.compact{
    display:grid;
    gap:18px;
    margin-top:6px;
    font-size:1rem;
    line-height:1.9;
    color:var(--text);
}

.intro-copy.compact p{
    max-width:60ch;
}

/* Mission cards */
.mission-section{ padding:118px 0; background:linear-gradient(180deg, #EDE3D1 0%, #E7DCC8 100%); }
.mission-header{
    width:min(980px, 90%);
    margin:0 auto 72px;
    text-align:center;
}

.stats-header{
    width:min(1160px, 92%);
    margin:0 auto 54px;
    text-align:center;
}

.mission-quote{
    max-width:980px;
    margin:0 auto;
    color:rgba(31,51,40,0.94);
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(2.8rem, 4.4vw, 4.8rem);
    line-height:1.12;
    letter-spacing:-0.015em;
    font-weight:600;
    margin-bottom:0;
}

.mission-header .kicker{
    margin-bottom:18px;
}

.mission-grid{
    width:min(1200px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}
.mission-card{
    background:#FBF8F2;
    border-radius:28px;
    box-shadow:var(--shadow-soft);
    padding:22px 22px 28px;
    text-align:left;
    border:1px solid rgba(31,51,40,0.07);
}
.mission-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}
.mission-card, .stat-card, .mosaic-card{
    transition:transform .28s ease, box-shadow .28s ease;
}

.mission-card{
    background:#FBF8F2;
    border-radius:28px;
    box-shadow:var(--shadow-soft);
    padding:286px 22px 28px;
    text-align:left;
    border:1px solid rgba(31,51,40,0.07);
    position:relative;
    overflow:hidden;
}

.mission-card::before{
    content:"";
    position:absolute;
    top:14px;
    left:14px;
    width:calc(100% - 28px);
    height:258px;
    border-radius:18px;
    background-size:cover;
    background-repeat:no-repeat;
}

/* Protection */
.mission-card:nth-child(1)::before{
    background-image:url("IntroductionPageImage/protection.jpg");
    background-position:45% 44%;
    background-size:115%;
}

/* Investigation */
.mission-card:nth-child(2)::before{
    background-image:
        url("IntroductionPageImage/investigation.jpg");
    background-position:40% 50%;
    background-size:135%;
}

/* Documentation */
.mission-card:nth-child(3)::before{
    background-image:url("IntroductionPageImage/documentation.jpg");
    background-position:center 38%;
}

.mission-card h3{ font-family:"Cormorant Garamond", Georgia, serif; font-size:2rem; color:var(--forest); margin-bottom:10px; }
.mission-card .kicker{margin-bottom:10px; font-size:.8rem;}
.mission-card p{ color:var(--text-soft); line-height:1.8; }

/* immersive photo */
.immersive-photo-section{
    min-height:74vh;
    background:
        linear-gradient(rgba(8,12,10,.18), rgba(10,18,14,.62)),
        url(IntroductionPageImage/Star.jpeg) center 38% / cover no-repeat;
    display:flex;
    align-items:flex-end;
    padding:0 8vw 7vh;
    position:relative;
}

.immersive-photo-section::before{
    content:"";
    position:absolute;
    inset:26px;
    border:1px solid rgba(255,255,255,0.12);
    pointer-events:none;
}

.immersive-photo-content{
    max-width:860px;
    color:var(--white);
    padding-bottom:1vh;
}

.immersive-photo-content h2{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(3rem, 5vw, 4.8rem);
    line-height:1.05;
    margin-bottom:0;
    max-width:820px;
    text-shadow:0 6px 24px rgba(0,0,0,.35);
}

/* Location */
.location-grid{
    width:min(1260px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:42px;
    align-items:stretch;
}

.location-card{
    background:#EFE7D7;
    border-radius:32px;
    padding:54px 50px;
    box-shadow:var(--shadow-soft);
}

.location-copy{
    font-size:1.02rem;
    line-height:1.92;
    color:var(--text);
    display:grid;
    gap:20px;
    max-width:62ch;
}

.location-media-wrapper{
    display:flex;
    flex-direction:column;
    gap:22px;
    height:100%;
}

.location-media{
    border-radius:30px;
    overflow:hidden;
    min-height:500px;
    background:
        linear-gradient(rgba(18,30,24,.08), rgba(18,30,24,.22)),
        url("IntroductionPageImage/RecordingSection.png")
        center 42% / cover
        no-repeat;
    box-shadow:var(--shadow);
}

.location-map{
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    background:#fff;
    min-height:280px;
}

.location-map iframe{
    width:100%;
    height:100%;
    min-height:260px;
    border:0;
    display:block;
}


/* Achievement */
.achievement-section{ padding:118px 0; background:linear-gradient(180deg, #1B2A22 0%, #23382D 55%, #2D4638 100%); }
.achievement-header{ width:min(1160px, 92%); margin:0 auto 54px; text-align:center; }
.achievement-header .section-title,
.achievement-header .section-subtitle{ color:var(--white); }
.achievement-header .section-subtitle{ color:rgba(255,255,255,0.82); margin:0 auto; }

.achievement-header{
    width:min(980px, 90%);
    margin:0 auto 68px;
    text-align:center;
}

.achievement-header .section-title{
    max-width:760px;
    margin:0 auto 14px;
}

.achievement-mosaic{
    width:min(1320px, 94%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.45fr .85fr;
    grid-template-rows:auto auto;
    gap:28px;
    align-items:stretch;
}

.mosaic-card{
    background:#F2EFE7;
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:none;
}
.mosaic-card:hover{ transform:translateY(-4px); }

.large-card{
    grid-row:1 / span 2;
    background:#F4F0E6;
    display:flex;
    flex-direction:column-reverse;
    height:100%;
}

.mosaic-image{
    min-height:320px;
    background:center/cover no-repeat;
}

.recovery-card .mosaic-image.recovery{
    background-image:
        linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.05)),
        url("IntroductionPageImage/Conservation_restoration.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    min-height:400px;
    flex:1;
}

.mosaic-image.record{
    min-height:340px;
    background-image:
        linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.12)),
        url("IntroductionPageImage/biodiversity.jpg");
    background-size:150%;
    background-position:35% 55%;
    background-repeat:no-repeat;
}

.mosaic-image.aquatic{
    min-height:340px;
    background-image:
        linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
        url("IntroductionPageImage/water recovery.jpg");
    background-size:118%;
    background-position:center 42%;
    background-repeat:no-repeat;
}

.mosaic-text{
    padding:36px 38px 40px;
}

.mosaic-text h3{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:2rem;
    color:var(--forest);
    margin-bottom:10px;
}

.mosaic-text p{
    color:var(--text-soft);
    line-height:1.9;
    margin-top:14px;
}

.large-card .mosaic-text{
    padding:38px 40px 28px;
    border-bottom:1px solid rgba(31,51,40,0.08);
}

.large-card .mosaic-text h3{
    margin-bottom:10px;
    font-size:2.18rem;
    line-height:1.05;
    letter-spacing:-0.01em;
}

.large-card .mosaic-text p{
    max-width:62ch;
    line-height:1.8;
    margin-top:12px;
}

.large-card .mosaic-text p:first-of-type{
    margin-top:0;
}

.large-card .mosaic-text p + p{
    margin-top:10px;
}

.achievement-quote{
    max-width:720px;
    margin:0 auto;
    color:rgba(255,255,255,0.76);
    font-size:1.02rem;
    line-height:1.75;
    font-style:italic;
    letter-spacing:.01em;
}

.large-card .achievement-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 24px;
}

.large-card .achievement-meta span{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(183,155,98,0.12);
    border:1px solid rgba(183,155,98,0.22);
    color:var(--forest);
    font-size:.76rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    font-weight:600;
}


/* Timeline */
.history-section{ background:var(--bg-soft); }
.history-header{ width:min(1160px, 92%); margin:0 auto 44px; text-align:center; }
.timeline{
    width:min(1120px, 94%);
    margin:0 auto;
    display:grid;
    gap:20px;
}

.history-header .section-title{
    max-width:900px;
    margin:0 auto;
    line-height:1.12;
}

.history-section{
    position:relative;
    background:var(--bg-soft);
}

.history-header,
.timeline{
    position:relative;
    z-index:1;
}

.timeline-item{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:26px;
    align-items:stretch;
}

.timeline-year{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:start;

    min-height:56px;
    width:140px;
    padding:0 18px;

    border-radius:18px;
    background:#EFE7D7;
    color:var(--forest);

    font-size:.92rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;

    box-shadow:0 6px 14px rgba(0,0,0,0.04);
}

.timeline-content{
    background:#FFFFFF;
    border-radius:24px;
    padding:30px 34px;
    min-height:170px;
    box-shadow:0 10px 22px rgba(0,0,0,0.06);
    border-left:4px solid rgba(183,155,98,0.7);
}
.timeline-content h3{
    font-family:"Cormorant Garamond", Georgia, serif;
    color:var(--forest);
    font-size:1.82rem;
    line-height:1.15;
    margin-bottom:14px;
    max-width:28ch;
}
.timeline-content p{ 
    color:var(--text-soft); 
    line-height:1.86;
    max-width:68ch; 
}

/* Footer */
.footerFrame{
    width:100%;
    background:linear-gradient(180deg, #101913 0%, #16231B 100%);
    padding:72px 0 48px;
    border-top:1px solid rgba(183,155,98,0.28);
    position:relative;
}
.footerFrame::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg, transparent, rgba(183,155,98,0.55), transparent);
}
.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; margin-bottom:18px; }
.footerLogo img{ width:100%; height:100%; object-fit:contain; }
.footerLogoText{ 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; }
.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;
}
.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;
}

.footerFrame::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(183,155,98,0.55),
        transparent
    );
}

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

    .mission-grid{
    grid-template-columns:1fr 1fr;
    } 
    
    .achievement-mosaic{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }
    .large-card{ grid-row:auto; }
    .intro-image,
    .location-media{ min-height:420px; }

    .achievement-meta{
    gap:8px;
}

.achievement-meta span{
    font-size:.78rem;
    padding:7px 12px;
}

}



@media screen and (min-width: 1100px){
    .BirdsPageHeaderImage{
        object-position:center 24%;
    }
}

@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); }
    .timeline-item{ grid-template-columns:1fr; gap:12px; }
}

@media screen and (max-width:560px){
    .guideBarButton1,
    .guideBarButton2{ padding:10px 12px; font-size:13px; }
    .intro-section,
    .mission-section,
    .location-section,
    .stats-section,
    .achievement-section,
    .history-section{ padding:84px 0; }
    .mission-grid{ grid-template-columns:1fr; }
    .intro-image,
    .location-media,
    .mosaic-image,
    .mosaic-image.recovery{ min-height:280px; }
    .location-card,
    .mission-card,
    .mosaic-text,
    .timeline-content{ padding:28px 24px; }
}

.achievement-quote{
    font-size:.95rem;
}

.mosaic-image.record,
.mosaic-image.aquatic{
    min-height:280px;
}