/* Immersive Travel Asia — About page.
   Uses the shared tokens/classes from ita.css; only about-* rules live here. */

/* ---------- Intro ---------- */
.about-intro-inner{max-width:840px;margin:0 auto;text-align:center}
.about-intro-h{font:500 54px/1.15 var(--serif);color:var(--jade);margin:0}
.about-intro-lede{font:400 18px/1.75 var(--sans);color:var(--sage);margin:0}
.about-rule{display:block;width:64px;height:2px;background:var(--gold);margin:30px auto}

/* ---------- Photo strip ---------- */
.about-strip-wrap{background:var(--cream);padding:0 0 84px}
.about-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.about-strip-cell{height:250px;overflow:hidden}
.about-strip-2{margin-top:30px}
.about-strip-img{width:100%;height:100%;object-fit:cover}

/* ---------- Split sections (image + text) ---------- */
.about-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-split-media{overflow:hidden}
.about-media-img{width:100%;height:100%;max-height:440px;object-fit:cover}
.about-h2{font:500 38px/1.2 var(--serif);color:var(--jade);margin:0 0 22px}
.about-body{font:400 16.5px/1.75 var(--sans);color:var(--sage);margin:0 0 20px}
.about-body:last-child{margin-bottom:0}

/* ---------- Pull-quote band ---------- */
.about-quote-inner{max-width:900px;margin:0 auto;text-align:center}
.about-eyebrow-light{color:var(--gold-light)}
.about-quote-text{font:400 34px/1.45 var(--serif);font-style:italic;color:#FDFCF5;margin:0}
.about-quote-body{font:400 16.5px/1.8 var(--sans);color:rgba(253,252,245,.85);max-width:780px;margin:0 auto}

/* ---------- Where we're based (fact cards) ---------- */
.about-facts-head{margin-bottom:48px}
.about-facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.about-fact-card{background:#fff;border:1px solid rgba(26,71,50,.1);border-top:3px solid var(--gold);padding:34px 32px}
.about-fact-title{font:500 23px var(--serif);color:var(--jade);margin:0 0 10px}
.about-fact-text{font:400 15.5px/1.7 var(--sans);color:var(--sage);margin:0}

/* ---------- Three promises ---------- */
.about-promises-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.about-promise-card{background:#fff;border:1px solid rgba(26,71,50,.1);padding:38px 34px;text-align:center}
.about-promise-title{font:500 26px var(--serif);color:var(--jade);margin:0 0 12px}
.about-promise-text{font:400 15.5px/1.7 var(--sans);color:var(--sage);margin:0}

/* ---------- Team ---------- */
.about-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.about-team-member{text-align:center}
.about-team-photo{width:200px;height:200px;margin:0 auto 18px;border-radius:50%;overflow:hidden;background:var(--cream)}
.about-team-img{width:100%;height:100%;object-fit:cover}
.about-team-ph{display:block;width:100%;height:100%;background:linear-gradient(160deg,var(--cream-2),var(--line))}
.about-team-name{font:500 21px var(--serif);color:var(--jade)}
.about-team-role{font:400 14px var(--sans);color:var(--gold);margin-top:4px}

/* ---------- CTA band ---------- */
.about-cta-inner{text-align:center}
.about-cta-h{font:500 36px var(--serif);color:#FDFCF5;margin:0}
.about-cta-text{font:400 16px/1.6 var(--sans);color:rgba(253,252,245,.75);margin:12px 0 30px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.about-intro-h{font-size:38px}
	.about-strip{grid-template-columns:1fr}
	.about-strip-2{margin-top:0}
	.about-split-grid{grid-template-columns:1fr;gap:32px}
	.about-split-media{order:-1}
	.about-media-img{max-height:320px}
	.about-quote-text{font-size:26px}
	.about-facts-grid{grid-template-columns:1fr}
	.about-promises-grid{grid-template-columns:1fr}
	.about-team-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
	.about-team-grid{grid-template-columns:1fr}
}