/* ==========================================================
   KINGO ADVENTURERS
   ABOUT US PAGE CSS
   Works together with home.css
========================================================== */



/* ==========================================================
   STORY SUBPAGE NAVIGATION
========================================================== */


.story-navigation {

background:#f8f5ee;

border-bottom:1px solid rgba(0,0,0,.08);

}


.story-navigation .wrap {

display:flex;

justify-content:center;

gap:50px;

padding:25px 20px;

}



.story-navigation a {

font-size:.85rem;

letter-spacing:1.5px;

text-transform:uppercase;

font-weight:600;

color:#555;

position:relative;

}



.story-navigation a:after {

content:"";

position:absolute;

bottom:-10px;

left:0;

width:0;

height:2px;

background:#b08d57;

transition:.3s ease;

}



.story-navigation a:hover:after,
.story-navigation a.active:after {

width:100%;

}



.story-navigation a.active {

color:#1d3b2a;

}







/* ==========================================================
   STORY INTRO
========================================================== */


.story-intro {

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

padding-top:120px;

padding-bottom:120px;

}



.story-intro h2 {

font-size:clamp(3rem,5vw,5rem);

line-height:1;

}



.story-copy {

font-size:1.08rem;

line-height:1.9;

color:#555;

}



.story-copy p {

margin-bottom:30px;

}








/* ==========================================================
   FEATURE IMAGE
========================================================== */


.feature-image {

padding-bottom:120px;

}



.feature-image img {

width:100%;

height:700px;

object-fit:cover;

display:block;

border-radius:4px;

}







/* ==========================================================
   JOURNEY SECTION
========================================================== */


.journey-section {

background:#faf8f2;

}



.journey-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

margin-top:100px;

}



.journey-grid.reverse {

direction:rtl;

}



.journey-grid.reverse > * {

direction:ltr;

}



.journey-image img {

width:100%;

height:520px;

object-fit:cover;

}



.journey-content span {

font-family:"DM Mono",monospace;

font-size:.9rem;

letter-spacing:3px;

color:#b08d57;

}



.journey-content h3 {

font-family:"Playfair Display",serif;

font-size:3rem;

margin:25px 0;

}



.journey-content p {

font-size:1.05rem;

line-height:1.9;

color:#555;

}







/* ==========================================================
   MISSION & VISION
========================================================== */


.mission-section {

padding:140px 0;

}



.mission-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}



.mission-image img {

width:100%;

height:600px;

object-fit:cover;

}



.mission-content h2 {

font-size:clamp(2.8rem,4vw,4.5rem);

line-height:1;

margin:25px 0;

}



.mission-content p {

font-size:1.05rem;

line-height:1.9;

color:#555;

margin-bottom:25px;

}







/* ==========================================================
   VALUES
========================================================== */


.values-background {

background-size:cover;

background-position:center;

padding:140px 0;

}



.light-head {

color:white;

}



.values-grid {

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-top:70px;

}



.value-card {

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.25);

padding:45px;

backdrop-filter:blur(8px);

transition:.35s ease;

}



.value-card:hover {

transform:translateY(-8px);

background:rgba(255,255,255,.15);

}



.value-card i {

font-size:2rem;

color:#d4b27a;

margin-bottom:25px;

}



.value-card h3 {

font-family:"Playfair Display",serif;

font-size:2rem;

color:white;

margin-bottom:15px;

}



.value-card p {

color:rgba(255,255,255,.85);

line-height:1.8;

}







/* ==========================================================
   WHY KINGO
========================================================== */


.why-story-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

}



.why-image img {

width:100%;

height:650px;

object-fit:cover;

}



.why-content h2 {

font-size:clamp(3rem,4vw,4.5rem);

line-height:1;

margin:25px 0 50px;

}



.why-points div {

padding:25px 0;

border-bottom:1px solid rgba(0,0,0,.1);

}



.why-points h3 {

font-family:"Playfair Display",serif;

font-size:1.8rem;

margin-bottom:10px;

}



.why-points p {

color:#666;

line-height:1.8;

}







/* ==========================================================
   RESPONSIBLE TOURISM
========================================================== */


.story-impact {

position:relative;

min-height:750px;

overflow:hidden;

}



.story-impact img {

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}



.story-impact .impact-content {

position:relative;

z-index:2;

height:750px;

display:flex;

flex-direction:column;

justify-content:center;

max-width:800px;

color:white;

}



.impact-content h2 {

font-size:clamp(3rem,5vw,5rem);

margin:25px 0;

}



.impact-content p {

font-size:1.15rem;

line-height:1.9;

}



.impact-stats {

display:flex;

gap:70px;

margin-top:50px;

}



.impact-stats strong {

display:block;

font-family:"Playfair Display",serif;

font-size:2.5rem;

}



.impact-stats span {

opacity:.8;

}







/* ==========================================================
   NUMBERS
========================================================== */


.numbers-grid {

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}



.number-card {

text-align:center;

padding:40px 20px;

}



.number-card h3 {

font-family:"Playfair Display",serif;

font-size:4rem;

color:#1d3b2a;

}



.number-card p {

color:#666;

line-height:1.7;

}







/* ==========================================================
   CTA
========================================================== */


.story-cta {

position:relative;

height:700px;

overflow:hidden;

}



.story-cta img {

width:100%;

height:100%;

object-fit:cover;

}



.story-cta .cta-content {

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

color:white;

z-index:2;

}



.cta-content h2 {

font-size:clamp(3rem,5vw,5rem);

line-height:1;

margin:25px 0;

}



.cta-content p {

max-width:650px;

font-size:1.15rem;

line-height:1.8;

}







/* ==========================================================
   MOBILE RESPONSIVENESS
========================================================== */


@media(max-width:900px){



.story-navigation .wrap {

flex-direction:column;

gap:20px;

align-items:center;

}



.story-intro,
.journey-grid,
.mission-grid,
.why-story-grid {

grid-template-columns:1fr;

gap:50px;

}



.journey-grid.reverse {

direction:ltr;

}



.feature-image img,
.journey-image img,
.mission-image img,
.why-image img {

height:400px;

}



.values-grid,
.numbers-grid {

grid-template-columns:1fr;

}



.impact-stats {

flex-direction:column;

gap:25px;

}



.story-cta {

height:600px;

}



}

.value-card h4 {
    font-family: "DM Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 12px 0;
    opacity: 0.9;
}

.value-card h3 {
    margin-bottom: 8px;
}