/* KH UYEN DOC · FTS MEGASTORY DESIGN SYSTEM
   Follows structural language of flytoskycharity/fts-megastory/src/site.css:
   Manrope + Source Serif 4, deep navy #0a1f45, teal #008c89,
   antique gold #b68a3b, editorial paper #f7f6f2.
   Does not duplicate the other website's content or admin.
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');
:root{--navy:#003271;--deep:#0a1f45;--accent:#008c89;--gold:#b68a3b;--paper:#f7f6f2;--ink:#172033;--mut:#5f6d86;--rule:#e2e7ed;--serif:'Source Serif 4',Georgia,serif;--sans:'Manrope',system-ui,Arial,sans-serif;--wide:1216px}
html{scroll-padding-top:83px}body{background:#fff;color:var(--ink);font-family:var(--sans);line-height:1.72;font-size:15px}
.container{max-width:var(--wide);padding-inline:clamp(18px,3vw,34px)}
.top{height:76px;background:#ffffffed;border-bottom:1px solid #e5eaef;box-shadow:0 3px 28px #0a1f4510;position:sticky}
.top .brand{gap:9px}.brand img{width:53px;height:55px}.brand-copy b{font-family:var(--sans);font-size:12.5px;color:var(--navy);letter-spacing:-.025em;max-width:290px}.brand-copy span{font-size:9px;max-width:290px;letter-spacing:.04em;color:#6c7890}
.navlinks{gap:clamp(10px,1.45vw,24px)}.navlinks a{font-family:var(--sans);font-size:12px;font-weight:750;color:#344663}.navlinks a:hover{color:var(--accent)}.top-actions .btn{background:var(--navy);font-size:12px;padding:11px 19px;border-radius:9px;box-shadow:none}.top-actions .btn:hover{background:var(--accent)}.langBtn{border-color:#dae2ee;color:var(--navy)}
.btn{border-radius:10px;background:var(--navy);font-size:13px;box-shadow:none;min-height:46px;padding:12px 21px}.btn:hover{background:#00458f}.btn.white{background:var(--gold);color:#fff}.btn.white:hover{background:#987127}.btn.outline{border-color:var(--navy);color:var(--navy);background:white}
.hero{min-height:min(92svh,820px);background:var(--deep);color:white;overflow:hidden;isolation:isolate}
.hero:before{background:linear-gradient(90deg,rgba(5,18,46,.94) 0%,rgba(5,19,46,.78) 41%,rgba(5,20,42,.30) 100%),linear-gradient(0deg,rgba(5,19,46,.52),transparent 47%);z-index:-1}
.hero:after{display:none}
.hero-grid{display:flex;align-items:center;min-height:min(92svh,820px);padding-top:100px;padding-bottom:120px;position:relative;z-index:1}
.hero-grid>div:first-child{position:relative;z-index:3;width:min(720px,100%);max-width:720px}
.hero .eyebrow{color:#d5dff3;font-size:12px;letter-spacing:.13em}.hero .eyebrow:before{background:var(--gold);width:35px}
.hero h1{font-family:var(--serif);font-weight:650;max-width:740px;margin:23px 0 23px;letter-spacing:-.025em}
.hero h1 #heroLine1{font-family:var(--sans);font-size:clamp(13px,1.55vw,18px);letter-spacing:.12em;color:#f1e2bd;font-weight:800;text-transform:uppercase;max-width:670px;margin-bottom:16px}
.hero h1 #heroLine2{font-family:var(--serif);font-size:clamp(43px,5.2vw,69px);letter-spacing:-.025em;font-weight:650;line-height:1.15;color:#fff!important;max-width:720px;text-wrap:balance}
.hero p{font-size:clamp(15px,1.45vw,18px);max-width:630px;line-height:1.82;color:#e0e9f4}
.hero-actions{gap:12px;margin-top:31px}.hero-actions .btn{border-radius:10px;font-size:14px;min-height:50px}
.hero-actions .btn[style]{background:#ffffff08!important;border:1px solid #ffffff85!important}
.hero-actions .btn[style]:hover{background:#ffffff32!important}
.hero-caption{font-size:10px;letter-spacing:.18em;color:#b0c1dc;margin-top:28px}
.hero-art{position:absolute;inset:0;width:auto;height:auto;margin:0;z-index:-1;display:block}
.hero-photo{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:0;transform:none;box-shadow:none;filter:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;border-radius:0}
.hero-photo:after{display:none}.hero-photo figcaption{bottom:24px;right:32px;left:auto;color:#fff9;font-size:11px;letter-spacing:.03em;z-index:0}
.hero-tag,.hero-tag.bottom,.hero-orbit{display:none!important}
.hero-controls{margin-top:34px;display:flex;gap:10px}.hero-controls button{border-color:#ffffff77;background:#051c3d66;backdrop-filter:blur(4px);width:41px;height:41px}
.hero-controls button:hover{background:var(--accent)}.hero-controls .hero-dots{gap:8px}.hero-controls .hero-dot{height:9px!important;width:9px!important;border:0;border-radius:20px;background:#ffffff85}.hero-controls .hero-dot[aria-current=true]{width:31px!important;background:#d5b77d}
.metrics{box-shadow:none;border-bottom:1px solid var(--rule);background:var(--paper)}
.metrics-inner{padding-top:28px;padding-bottom:28px}
.metric{padding:18px 25px;border-right:1px solid #d7dbe1}
.metric strong{font-family:var(--serif);font-weight:700;font-size:clamp(36px,3.55vw,51px);letter-spacing:-.03em;color:var(--navy)}
.metric span{font-size:12px;color:#4c5a73;margin-top:7px}.metric:first-child{padding-left:0}
.chapter-index{padding-top:42px;padding-bottom:3px}
.toc-details{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:21px 27px;box-shadow:0 7px 23px #0a1f4507}
.toc-summary{font-family:var(--sans);font-size:13px;color:var(--navy)}
.toc-links{gap:9px}.toc-link{border:1px solid #dce4ea;border-radius:7px;background:#f8fafb;padding:9px 13px;color:#3d4e67;font-size:11px}
.toc-link:hover{background:var(--navy);border-color:var(--navy)}
.section{scroll-margin-top:82px;padding-top:clamp(66px,8vw,112px);padding-bottom:clamp(66px,8vw,114px);background:#fff}
.section.alt{background:var(--paper)}
.section.dark{background:var(--deep);color:white}
.heading{max-width:870px;margin-bottom:clamp(27px,4vw,45px)}
.heading h2{font-family:var(--serif);font-weight:650;font-size:clamp(32px,3.8vw,49px);line-height:1.2;color:var(--navy);letter-spacing:-.016em;margin:14px 0 16px;text-wrap:balance}
.heading .eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.heading .eyebrow:before{background:var(--gold);height:2px;width:28px}
.heading p,.alt .heading p{font-size:clamp(15px,1.6vw,17px);color:#5c6981;line-height:1.78;max-width:800px}
.dark .heading h2,.dark .heading p{color:white}.dark .heading p{color:#c2cee3}.dark .heading .eyebrow{color:#78d6d1}
.prose,.editorial-rich{font-family:var(--sans);line-height:1.93;font-size:15px;color:#394860}
.prose p{margin-bottom:21px}.prose strong{color:#1b344e}
.section .split{gap:clamp(30px,5vw,75px)}.story-split{grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr)}
.story-split .prose{text-align:left;line-height:1.93;text-wrap:pretty}
.story-split .prose p:nth-child(2){border:0;border-left:3px solid var(--accent);background:#edf6f5;padding:22px 25px;border-radius:0 10px 10px 0;color:#173e4b}
.visual-panel{border-radius:13px;padding:0;background:#e5eeee;aspect-ratio:4/5;min-height:440px;max-height:590px}
.visual-panel:after{display:none}.visual-panel img{max-width:75%;max-height:75%;padding:0;background:transparent;border-radius:0}
.visual-panel .context-photo{max-width:none;max-height:none;width:100%;height:100%}.visual-panel:has(.context-photo){min-height:440px;max-height:590px;border-radius:13px}
.visual-panel .number-badge{letter-spacing:.09em;font-size:10px;color:var(--navy);left:19px;bottom:17px;background:#ffffffe3;padding:8px 10px;border-radius:4px}
.visual-panel:has(.context-photo) .number-badge{color:var(--navy);background:#ffffffe9}
.feature-grid{gap:17px}.feature-grid.four{gap:16px}
.feature{border:1px solid #dfe5eb;border-radius:11px;padding:31px 27px;background:#fff;min-height:235px;box-shadow:0 7px 19px #0a1f4505;position:relative}
.feature:before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:var(--accent);border-radius:11px 11px 0 0}
.feature:nth-child(3n+2):before{background:var(--gold)}.feature:nth-child(3n+3):before{background:var(--navy)}
.feature:hover{box-shadow:0 16px 38px #0a1f4513}
.feature .num{font-family:var(--serif);font-size:17px;color:var(--gold);letter-spacing:0}
.feature h3{font-family:var(--sans);font-weight:800;color:var(--navy);font-size:17px;line-height:1.5;margin-top:22px}
.feature p{font-size:13px;line-height:1.9;color:#53627a}
.sdg-strip{margin-top:30px;background:var(--paper);border:1px solid var(--rule);padding:24px;border-radius:12px}
.sdg-intro{color:var(--navy);font-size:13px}.sdg-pill{border-radius:9px}.sdg-pill b{border-radius:6px}
.letter-paper{border:0;border-radius:12px;padding:clamp(30px,5vw,74px);box-shadow:0 14px 50px #0a1f450b;background:white;max-width:1020px}
.letter-paper:before{color:#e5efed}
.letter-prose{font-family:var(--sans);font-size:clamp(14px,1.3vw,16px);line-height:1.99;color:#25364c;text-align:left}
.letter-prose p:first-child{font-family:var(--serif);font-size:24px;color:var(--navy)}
.letter-prose p:last-child{color:var(--navy)}
.letter-signature{color:var(--navy)}
.meaning-grid{gap:28px;grid-template-columns:1.1fr .9fr}
.meaning-prose{padding:clamp(25px,3.5vw,45px);border:1px solid #e1e5ed;border-radius:11px;background:#fff;line-height:1.95}
.meaning-prose p{border-color:var(--accent);text-align:left}.meaning-prose p:nth-child(2){border-color:var(--gold)}
.meaning-visual{border-radius:11px;background:var(--deep)}.meaning-highlight{background:var(--deep);color:#fff;font-family:var(--serif);font-size:clamp(22px,2.3vw,31px);font-weight:650}
.quote-band{background:var(--deep);padding:90px 0}
.quote-band blockquote{font-family:var(--serif);font-weight:650;font-size:clamp(27px,3.5vw,42px)}
.quote-band .attribution{color:#bfcce0}.quote-band .eyebrow{color:#60d4cd}
.steps{gap:15px}.step{border:1px solid #ffffff36;background:#ffffff0a;border-radius:10px;padding:31px 24px}
.step b{font-family:var(--serif);font-size:34px;color:#e0bf80}
.step h3{font-family:var(--sans);font-size:16px}.step p{color:#ced8e8}
.projects-gallery{gap:17px}
.project-place{border-radius:11px;box-shadow:none;border:1px solid var(--rule);background:#eff5f6}
.project-place:first-child{background:var(--navy)}.project-place.has-photo:after{background:linear-gradient(0deg,#071a3cd9,transparent 70%)}
.project-place.has-photo .photo-label strong{font-family:var(--serif);font-weight:650;font-size:26px}
.project-place.has-photo:first-child .photo-label strong{font-size:37px}
.project-place .place-mark{opacity:.1}
.feedback-card{border-radius:10px;border:1px solid var(--rule);box-shadow:0 5px 16px #0a1f4509;padding:28px 22px}
.feedback-card strong{font-family:var(--serif);font-size:36px;color:var(--navy)}
.feedback-card h3{color:#173451}.feedback-card p{color:#596981}
.sponsor-banner{background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:none;padding:44px}
.sponsor-banner h3{font-family:var(--serif);font-size:clamp(29px,3vw,40px);font-weight:650;color:var(--navy)}
.sponsor-banner p{color:#4e5c71}
.sponsor-side{border-radius:11px;border:1px solid #e0e4e9;padding:30px}.sponsor-side strong{font-family:var(--serif);color:var(--navy);font-size:36px}
.sponsor-banner .btn{background:var(--gold)}.sponsor-banner .btn:hover{background:#9e772e}
.bottom-cta{background:var(--deep);color:#fff}
.bottom-cta h2{font-family:var(--serif);font-weight:650;color:#fff;font-size:clamp(33px,3.8vw,49px)}
.bottom-cta p{color:#d5dfed}.bottom-cta .eyebrow{color:#e0c18e}.bottom-cta .btn{background:var(--gold)}
.bottom-cta .visual-panel{background:#ffffff0f;border:1px solid #ffffff33;min-height:290px;max-height:370px;aspect-ratio:5/4;padding:30px}
.bottom-cta .visual-panel img{background:#fff;border-radius:12px;padding:15px;max-width:70%;max-height:75%}
.bottom-cta .visual-panel .number-badge{background:#ffffff1a;color:#e6edf4}
.site-footer{background:#07192e;color:#dae6ef}.footer-grid{padding-top:66px;padding-bottom:47px;gap:50px}
.site-footer h3{color:#fff;font-size:12px;letter-spacing:.1em}.site-footer p,.site-footer address,.footer-links{color:#c7d1df;font-size:12px}.site-footer a{color:#e0e8f2}
.footer-base{border-top:1px solid #ffffff25;color:#a0b0c5;font-size:11px}
.footer-brand img{max-height:105px;width:125px}
.sourceNote{color:#7d889d}
.dynamicBlock{border-radius:11px;background:#f0f5f5}.dynamicBlock.dark{background:var(--deep)}.dynamicBlock.teal{background:var(--accent)}
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px}
@media(max-width:1090px){.hero-grid{padding-block:105px}.navlinks{gap:10px}.navlinks a{font-size:11px}}
@media(max-width:850px){.top{height:72px}.navlinks{top:72px}.hero,.hero-grid{min-height:690px}.hero-grid{padding-top:115px;padding-bottom:75px}.hero:before{background:linear-gradient(90deg,#081936e8,#0819368f),linear-gradient(0deg,#071531bb,transparent 60%)}.hero-grid>div:first-child{max-width:640px}.hero-photo img{object-position:65% center}.story-split{grid-template-columns:1fr}.visual-panel,.visual-panel:has(.context-photo){min-height:330px;max-height:440px;aspect-ratio:16/9}.meaning-grid{grid-template-columns:1fr}.meaning-visual{position:static}.footer-grid{gap:28px}}
@media(max-width:610px){.top{height:69px}.brand-copy b{font-size:10.5px}.brand-copy span{font-size:8px}.hero,.hero-grid{min-height:680px}.hero-grid{padding-top:90px;padding-bottom:85px;align-items:center}.hero-photo{height:100%;width:100%}.hero-photo img{object-position:66% center}.hero:before{background:linear-gradient(90deg,#061632e8,#061632b4),linear-gradient(0deg,#061632d9,transparent 70%)}.hero h1 #heroLine1{font-size:12px;letter-spacing:.08em}.hero h1 #heroLine2{font-size:clamp(38px,10vw,52px);max-width:380px}.hero p{font-size:14px}.hero-controls{margin-top:26px}.hero-caption{font-size:9px}.metric strong{font-size:34px}.metric{padding:15px 10px}.heading h2{font-size:clamp(30px,8vw,38px)}.section{padding-block:65px}.letter-paper{padding:24px 20px}.feature-grid,.feature-grid.four,.feedback-grid,.steps{grid-template-columns:1fr}.feature{min-height:0;padding:25px}.projects-gallery{grid-template-columns:1fr}.meaning-prose{padding:24px 20px}.meaning-highlight{font-size:24px}.visual-panel,.visual-panel:has(.context-photo){min-height:250px}.quote-band{padding:65px 0}.sponsor-banner{padding:25px}.footer-grid{gap:27px}.bottom-cta{padding-block:70px}}
@media(prefers-reduced-motion:reduce){.hero-photo,.hero-photo img,.project-place img,.btn,.feature{transition:none!important;animation:none!important}}

/* Photo overlay lives inside the hero artwork so it sits behind live text. */
.hero:before{display:none!important}
.hero-grid{isolation:isolate}
.hero-art{z-index:0!important;pointer-events:none}
.hero-art::after{content:'';display:block;position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(5,18,46,.96) 0%,rgba(5,19,46,.85) 42%,rgba(5,20,42,.26) 100%),linear-gradient(0deg,rgba(5,19,46,.66),transparent 48%)}
.hero-grid>div:first-child{z-index:3}
.hero-photo figcaption{z-index:3}
@media(max-width:850px){.hero-art::after{background:linear-gradient(90deg,#081936e9,#08193691),linear-gradient(0deg,#071531b9,transparent 60%)}}
@media(max-width:610px){.hero-art::after{background:linear-gradient(90deg,#061632e9,#061632bc),linear-gradient(0deg,#061632dc,transparent 70%)}}

/* Full-bleed artwork escapes the centered content wrapper. */
.hero-art{left:50%!important;right:auto!important;width:100vw!important;transform:translateX(-50%);top:0;bottom:0}
.hero-grid{overflow:visible}
.hero-photo{width:100%;height:100%}

/* Distinct impact storytelling, not another generic card grid. */
.impact-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #dce4ed;border-bottom:1px solid #dce4ed;margin-top:32px;background:#fff}
.impact-number{padding:35px 24px 36px;min-width:0;position:relative;border-right:1px solid #dce4ed}
.impact-number:first-child{padding-left:0}.impact-number:last-child{border-right:0}
.impact-sequence{font:800 11px/1 var(--sans);color:var(--accent);letter-spacing:.15em;display:block;margin-bottom:17px}
.impact-number strong{font:650 clamp(34px,4vw,56px)/1.16 var(--serif);color:var(--navy);display:block;white-space:normal;letter-spacing:-.04em}
.impact-number .impact-label{display:block;font-size:12px;font-weight:750;line-height:1.75;color:#526078;margin-top:12px}
.impact-narrative{border-left:3px solid var(--gold);padding:6px 0 6px 25px;margin-top:35px;max-width:950px}
.impact-narrative .prose{color:#4e5971;font-size:15px;line-height:1.95}.impact-narrative p:last-child{margin-bottom:0}
.steps{position:relative}
.steps:before{content:'';position:absolute;left:22px;right:22px;top:66px;height:1px;background:#ffffff4d}
.step{position:relative;z-index:1}
.step b{background:var(--deep);display:inline-block;padding-right:17px}
.feedback-card{position:relative;padding-top:34px}
.feedback-card:before{content:'“';position:absolute;right:18px;top:0;font:700 78px/1 var(--serif);color:#f1f3f6;pointer-events:none}
.feedback-card>*{position:relative}
@media(max-width:850px){.impact-numbers{grid-template-columns:repeat(2,1fr)}.impact-number:nth-child(2){border-right:0}.impact-number:nth-child(-n+2){border-bottom:1px solid #dce4ed}.impact-number:nth-child(3){padding-left:0}}
@media(max-width:610px){.impact-number{padding:25px 16px}.impact-number:first-child{padding-left:0}.impact-number:nth-child(3){padding-left:0}.impact-number strong{font-size:clamp(29px,8.5vw,42px)}.impact-number .impact-label{font-size:11px}.impact-narrative{margin-top:27px;padding-left:18px}.steps:before{display:none}}

/* Source-specific storytelling layouts: activity model and sustainability. */
.approach-overview{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,68px);align-items:center;padding:18px 0 30px}
.approach-overview .prose{font-size:15px;line-height:2.06;color:#394a62}
.approach-overview .prose p:first-child{font-size:clamp(16px,1.55vw,18px);line-height:1.9;color:#1c3b54}
.approach-photo{margin:0;overflow:hidden;border-radius:11px;aspect-ratio:4/3;background:#e8f1f4;box-shadow:0 15px 38px #0a1f4512}
.approach-photo img{width:100%;height:100%;object-fit:cover}
.approach-subtitle{padding:25px 0 16px;border-top:1px solid var(--rule)}
.approach-subtitle h3{font:650 clamp(27px,3vw,40px)/1.2 var(--serif);color:var(--navy);margin:11px 0 9px}
.approach-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:19px}
.approach-step{position:relative;border:1px solid var(--rule);border-radius:10px;padding:27px 25px;background:var(--paper);min-height:236px}
.approach-index{display:block;font:650 37px/1 var(--serif);color:var(--accent);margin-bottom:23px}
.approach-step h4{font-size:16px;line-height:1.5;color:var(--navy);font-weight:800;margin:0 0 10px}
.approach-step p{font-size:13px;line-height:1.82;color:#53617b;margin:0}
.strategy-intro{max-width:800px;margin-bottom:38px}
.strategy-steps{border-top:1px solid #e0e4eb}
.strategy-step{display:grid;grid-template-columns:120px 1fr;gap:35px;padding:28px 18px 30px 0;border-bottom:1px solid #e0e4eb;transition:background .2s}
.strategy-step:hover{background:#f8fafb}
.strategy-num{font:650 clamp(40px,5vw,66px)/1 var(--serif);color:var(--accent);letter-spacing:-.05em;padding:4px 0}
.strategy-detail{max-width:860px}
.strategy-detail h3{font-size:clamp(17px,2vw,21px);color:var(--navy);margin:4px 0 12px;line-height:1.4}
.strategy-detail p{font-size:14px;color:#475770;line-height:1.95;margin:0}
.strategy-manifesto{font-family:var(--serif);font-weight:650;color:var(--navy);font-size:clamp(19px,2.1vw,27px);line-height:1.5;text-align:center;margin-top:34px;padding:25px 18px;background:#e8f4f2;border-radius:10px;border-left:4px solid var(--accent)}
@media(max-width:850px){.approach-overview{grid-template-columns:1fr}.approach-photo{aspect-ratio:16/9}.approach-steps{grid-template-columns:1fr 1fr}}
@media(max-width:610px){.approach-steps{grid-template-columns:1fr}.approach-step{min-height:0;padding:24px}.strategy-step{grid-template-columns:60px 1fr;gap:15px;padding:20px 0}.strategy-num{font-size:40px}.strategy-detail p{font-size:13px}}

.section-narrative{max-width:880px;margin:0 0 36px;font-size:15px;line-height:1.95;color:#4b5a70}.section-narrative p:last-child{margin-bottom:0}
.section.dark .section-narrative{color:#d3dfed}