@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--pine:#123e66;--forest:#092e4c;--ink:#173551;--cream:#f7f9fc;--sand:#e9f1f7;--gold:#f28b1e;--sage:#e2f2fa;--white:#fff;--muted:#607588;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{font-family:'Manrope','DM Sans',sans-serif;letter-spacing:-.045em;line-height:1.12}h1{font-size:clamp(3.1rem,6vw,6.1rem);font-weight:800}h2{font-size:clamp(2.25rem,4vw,3.65rem);font-weight:800}h3{font-size:1.3rem;font-weight:800}p{font-size:1.02rem}.container{width:min(1160px,calc(100% - 44px));margin:auto}.site-header{background:rgba(248,245,237,.95);position:sticky;top:0;z-index:100;backdrop-filter:blur(18px);border-bottom:1px solid rgba(9,46,41,.09)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:22px}.brand{display:flex;align-items:center;gap:11px;min-width:220px}.brand img{height:47px;width:47px}.brand-name{font-family:Manrope,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.05em;line-height:1.02}.brand-caption{font-size:10px;letter-spacing:.2em;font-weight:800;color:#667d91;display:block;margin-top:5px}.nav-links{display:flex;align-items:center;gap:29px}.nav-links a{font-size:.9rem;font-weight:700;transition:color .2s}.nav-links a:not(.btn):hover,.nav-links .active{color:#e67912}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:100px;padding:15px 24px;line-height:1.3;font-family:inherit;font-size:.91rem;font-weight:800;cursor:pointer;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-gold{background:var(--gold);color:#163529}.btn-gold:hover{background:#e1c17e}.btn-pine{background:var(--pine);color:white}.btn-white{background:white;color:var(--pine)}.btn-outline{border:1px solid #bcd2e2;color:var(--pine);background:transparent}.mobile-toggle{display:none;border:0;background:transparent;font-size:26px;color:var(--pine);cursor:pointer}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:#e67912}.eyebrow:before{content:'';width:22px;height:2px;background:currentColor}.eyebrow-light{color:#edd29a}.section{padding:105px 0}.section-tight{padding:75px 0}.section-heading{max-width:720px;margin-bottom:45px}.section-heading p{color:var(--muted);max-width:610px}.hero{position:relative;overflow:hidden;background:var(--forest);color:white}.hero:before{content:'';position:absolute;width:590px;height:590px;border-radius:50%;border:1px solid #ffffff17;right:-110px;top:-160px;box-shadow:0 0 0 90px #ffffff08,0 0 0 180px #ffffff05;pointer-events:none}.hero:after{content:'';position:absolute;left:-100px;bottom:-200px;width:380px;height:380px;border-radius:50%;background:#288ed144;filter:blur(75px)}.hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.07fr .93fr;gap:80px;align-items:center;min-height:680px;padding-top:65px;padding-bottom:75px}.hero h1{margin:21px 0 25px}.highlight{color:var(--gold)}.hero-copy>p{max-width:550px;color:#e0ecf6;font-size:1.17rem;line-height:1.8}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.hero-photo{position:relative;max-width:435px;margin:auto;width:100%;}.hero-photo>img{height:515px;width:100%;object-fit:cover;object-position:center 14%;border-radius:230px 230px 22px 22px;box-shadow:0 30px 60px #0003}.hero-photo:before{content:'';position:absolute;inset:-14px 14px 14px -14px;border:1px solid #f28b1eaa;border-radius:230px 230px 22px 22px;z-index:-1}.photo-tag{position:absolute;bottom:28px;left:-36px;background:#fffdf7;color:var(--pine);box-shadow:0 12px 40px #0002;border-radius:14px;padding:19px 23px;min-width:245px}.photo-tag strong{display:block;font-family:Manrope;font-size:1rem}.photo-tag span{font-size:.79rem;color:#617c91}.quote-band{background:#e0effa;padding:27px 0}.quote-layout{display:flex;align-items:center;justify-content:space-between;gap:24px}.quote-layout p{margin:0;font-family:Manrope;font-size:clamp(1rem,2vw,1.4rem);font-weight:700;letter-spacing:-.03em}.quote-layout span{font-size:.8rem;font-weight:800;color:#28668c;white-space:nowrap;letter-spacing:.1em}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.card{padding:32px;border-radius:var(--radius);background:white;border:1px solid #e7e5dc;box-shadow:0 7px 28px #123e660b}.card .number{color:#ef871c;font-size:.8rem;font-weight:800;letter-spacing:.16em;margin-bottom:38px}.card h3{margin-bottom:12px}.card p{color:var(--muted);font-size:.95rem;margin-bottom:0}.card-icon{display:flex;align-items:center;justify-content:center;background:#e4f3fc;color:var(--pine);width:52px;height:52px;border-radius:16px;font-size:24px;margin-bottom:27px}.text-link{display:inline-flex;align-items:center;gap:9px;color:var(--pine);font-weight:800;border-bottom:1px solid #ef942c;padding-bottom:4px}.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}.feature-visual{position:relative}.feature-visual img{border-radius:24px;height:460px;object-fit:cover;width:100%;object-position:center 18%}.feature-visual:after{position:absolute;content:'';height:170px;width:170px;border-radius:100%;background:#f28b1e;z-index:-1;bottom:-28px;left:-28px}.body-copy{max-width:610px;color:#607588}.green-section{background:var(--pine);color:#fff}.green-section p{color:#d7eaf8}.green-section .body-copy{color:#d7eaf8}.green-section .eyebrow{color:#ffb25a}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}.stat{padding-top:18px;border-top:1px solid #ffffff54}.stat b{display:block;font-family:Manrope;font-size:1.05rem}.stat span{display:block;font-size:.84rem;color:#bbd8ed;margin-top:4px}.portrait-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px}.person-card{background:white;border-radius:24px;overflow:hidden;box-shadow:0 9px 30px #123e6610}.person-card img{height:355px;width:100%;object-fit:cover;object-position:center 23%}.person-info{padding:29px}.person-info .role{color:#e67f16;font-weight:800;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}.person-info h3{margin:10px 0}.person-info p{color:var(--muted);font-size:.95rem;margin:0}.cta-panel{position:relative;padding:65px;overflow:hidden;background:var(--pine);border-radius:28px;color:white;display:flex;justify-content:space-between;align-items:center;gap:50px}.cta-panel:after{content:'';position:absolute;border:1px solid #ffffff22;border-radius:50%;width:400px;height:400px;right:-130px;bottom:-290px;pointer-events:none}.cta-panel p{color:#dce6db;max-width:530px}.cta-panel h2{margin:12px 0}.page-hero{background:var(--forest);color:white;position:relative;overflow:hidden;padding:90px 0}.page-hero:after{content:'';position:absolute;right:-60px;top:-220px;border-radius:50%;width:540px;height:540px;border:85px solid #ffffff08}.page-hero .container{position:relative;z-index:2}.page-hero h1{font-size:clamp(2.9rem,5vw,5rem);max-width:850px;margin:19px 0}.page-hero p{font-size:1.13rem;max-width:660px;color:#d5e3db}.program-row{display:grid;grid-template-columns:90px 1fr;gap:28px;padding:42px 0;border-bottom:1px solid #dedfd5}.program-row .program-no{color:#e67f16;font-size:1rem;font-family:Manrope;font-weight:800}.program-row p{max-width:730px;color:var(--muted)}.small-note{font-size:.82rem!important;color:#617588!important}.soft-bg{background:#ebf4fa}.pill{border:1px solid #cbdbe7;border-radius:50px;padding:10px 15px;font-size:.82rem;font-weight:700;display:inline-block;margin:5px 6px 5px 0}.ways-card{display:flex;flex-direction:column;min-height:280px}.ways-card p{flex:1}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.form{background:#fff;border-radius:24px;padding:33px;border:1px solid #e3eaf2}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}.field label{font-size:.85rem;font-weight:800}.field input,.field textarea,.field select{border:1px solid #cdd5cc;border-radius:12px;background:#fbfdff;padding:14px 15px;font:inherit;color:var(--pine);width:100%}.field textarea{min-height:135px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid #2c9ad4;outline-offset:2px}.form-status{font-size:.86rem;color:#206e95;min-height:24px;margin-top:12px}.footer{background:#092846;color:#e3ede5;padding:62px 0 27px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding-bottom:50px}.footer .brand{margin-bottom:23px}.footer p{max-width:410px;color:#b0cbe0;font-size:.9rem}.footer h4{font-size:1rem;margin:6px 0 18px}.footer a:not(.brand){display:block;color:#c9dced;font-size:.9rem;margin-bottom:10px}.footer a:hover{color:#ffb66b}.footer-bottom{border-top:1px solid #ffffff24;padding-top:23px;display:flex;justify-content:space-between;gap:12px;color:#97bed8;font-size:.8rem}.footer .brand-caption{color:#f5a23c}.skip-link{position:absolute;left:-9999px;top:4px;z-index:999;padding:10px;background:white;color:black}.skip-link:focus{left:4px}.reveal{opacity:0;transform:translateY(15px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}@media(max-width:950px){.hero-layout{gap:40px}.nav-links{gap:14px}.nav-links a{font-size:.82rem}.nav-links .btn{padding:12px 15px}.split{gap:40px}}@media(max-width:750px){.header-inner{min-height:74px}.mobile-toggle{display:block}.nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--cream);padding:18px 22px 25px;box-shadow:0 18px 26px #0002;flex-direction:column;align-items:stretch;gap:13px}.nav-links.open{display:flex}.nav-links a{font-size:1rem}.nav-links .btn{width:100%}.hero-layout,.split,.contact-grid{grid-template-columns:1fr}.hero-layout{min-height:0;padding:63px 0 68px;gap:45px}.hero h1{font-size:clamp(3rem,12vw,4.7rem)}.hero-photo{max-width:355px}.hero-photo>img{height:420px}.photo-tag{left:-10px;bottom:20px}.section{padding:70px 0}.section-tight{padding:55px 0}.grid-3,.grid-2,.portrait-cards,.footer-grid{grid-template-columns:1fr}.portrait-cards{gap:20px}.person-card img{height:385px}.quote-layout{display:block}.quote-layout span{display:block;margin-top:10px}.cta-panel{display:block;padding:35px}.cta-panel .btn{margin-top:12px}.page-hero{padding:66px 0}.program-row{grid-template-columns:55px 1fr;gap:10px}.stats{gap:11px}.footer-grid{gap:25px}.footer-bottom{flex-direction:column}}
/* 2026 KJC brand refresh: original clean layout preserved; navy/blue/orange primary, green accent only. */
:root{--kjc-orange:#f28b1e;--kjc-blue:#259ee7;--kjc-green:#41ac55;--kjc-navy:#123e66;}
.btn-gold{background:var(--kjc-orange);color:#fff}.btn-gold:hover{background:#e5790e}.btn-pine{background:var(--kjc-blue)}.card-icon{color:var(--kjc-blue)}.card:nth-child(3n) .card-icon{color:var(--kjc-green)}.photo-tag{border-bottom:4px solid var(--kjc-orange)}.site-header{background:rgba(247,249,252,.97)}.hero{background:linear-gradient(120deg,#092e4c,#123e66)}.page-hero{background:linear-gradient(125deg,#092e4c,#144775)}.green-section{background:#123e66}.footer{background:#092846}.section-heading .eyebrow{color:#d97212}.stat:nth-child(2){border-top-color:var(--kjc-blue)}.stat:nth-child(3){border-top-color:var(--kjc-green)}

/* Cinematic background art refinement */
.site-header{background:rgba(248,250,252,.97)}
.brand img{background:#fff;border-radius:10px;padding:2px;box-shadow:0 4px 14px rgba(18,62,102,.08)}
.hero-cinematic{background:linear-gradient(120deg,#0a2f4d 0%,#123e66 45%,#0f4470 100%)}
.hero-cinematic:before{content:'';position:absolute;right:-90px;top:-160px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 90px rgba(255,255,255,.04),0 0 0 180px rgba(255,255,255,.025);pointer-events:none;animation:softPulse 9s ease-in-out infinite}
.hero-cinematic:after{content:'';position:absolute;right:6%;top:14%;width:min(620px,48vw);height:70%;background:linear-gradient(90deg,rgba(10,47,77,.88) 0%,rgba(10,47,77,.42) 28%,rgba(10,47,77,.12) 55%,rgba(10,47,77,.08) 100%),url('images/kjc-community-art.webp') center/cover no-repeat;border-radius:28px;opacity:.28;filter:saturate(.95) contrast(1.05);box-shadow:0 30px 60px rgba(0,0,0,.14);pointer-events:none;animation:heroFloat 14s ease-in-out infinite}
.hero-slogan{display:inline-block;margin:4px 0 18px;padding:10px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);font-size:.82rem;letter-spacing:.12em;font-weight:800;text-transform:uppercase;color:#b7d9f4}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{text-shadow:0 10px 26px rgba(0,0,0,.12)}
.hero-photo{z-index:2}
.hero-photo>img{box-shadow:0 35px 70px rgba(0,0,0,.28)}
.hero-photo:before{border:1px solid rgba(242,139,30,.8);box-shadow:0 18px 45px rgba(0,0,0,.12)}
.photo-tag{border-bottom:4px solid var(--kjc-orange);backdrop-filter:blur(10px)}
.vision-band{background:linear-gradient(90deg,#e9f4fb 0%,#f8fbfd 50%,#eef8ef 100%)}
.vision-band .quote-layout p{font-weight:800;color:#123e66}
.vision-band .quote-layout span{color:#2b7cab}
.green-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#123e66 0%,#154975 100%)}
.green-section:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,62,102,.92) 0%,rgba(18,62,102,.82) 42%,rgba(18,62,102,.74) 100%),url('images/kjc-community-art.webp') center/cover no-repeat;opacity:.11;pointer-events:none}
.green-section .container{position:relative;z-index:1}
.feature-visual img{box-shadow:0 24px 50px rgba(0,0,0,.18)}
.cta-panel{background:linear-gradient(135deg,#123e66 0%,#0f4470 62%,#1e6ba6 100%)}
.cta-panel:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,0)),url('images/kjc-community-art.webp') center/cover no-repeat;opacity:.08;pointer-events:none}
.page-hero{background:linear-gradient(125deg,#092e4c,#144775);position:relative}
.page-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,46,76,.9),rgba(20,71,117,.78)),url('images/kjc-community-art.webp') center/cover no-repeat;opacity:.14;pointer-events:none}
.page-hero .container{position:relative;z-index:2}
.card,.person-card,.form,.cta-panel{box-shadow:0 12px 34px rgba(18,62,102,.08)}
.text-link{transition:gap .2s ease,color .2s ease}.text-link:hover{gap:14px;color:#e67912}
@keyframes heroFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
@keyframes softPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.8}}
@media(max-width:950px){.hero-cinematic:after{right:2%;top:auto;bottom:7%;width:50%;height:44%;opacity:.18}}
@media(max-width:750px){.hero-cinematic:after{display:none}.hero-slogan{font-size:.72rem;line-height:1.45}.vision-band .quote-layout p{font-size:1rem}.feature-visual:after{width:130px;height:130px;bottom:-18px;left:-18px}}

/* 2026 motion and transparent KJC identity */
.brand-updated{gap:12px;min-width:235px}
.brand-updated img{width:102px;height:auto;max-height:62px;object-fit:contain;padding:0;border-radius:0;background:transparent;box-shadow:none;filter:none}
.footer .brand-updated img{width:112px}
.brand-updated .brand-name{font-size:17px}
.brand-updated .brand-caption{letter-spacing:.11em;font-size:9px}
/* Default content is visible even when JavaScript is disabled. */
.motion-ready .scroll-motion{opacity:0;transform:translate3d(0,26px,0);filter:blur(3px);transition:opacity .85s cubic-bezier(.2,.7,.25,1),transform .85s cubic-bezier(.2,.7,.25,1),filter .85s ease;transition-delay:var(--motion-delay,0ms)}
.motion-ready .scroll-motion.in-view{opacity:1;transform:translateZ(0);filter:blur(0)}
.motion-ready .scroll-motion[data-direction="left"]{transform:translate3d(-24px,0,0)}
.motion-ready .scroll-motion[data-direction="right"]{transform:translate3d(24px,0,0)}
.motion-ready .scroll-motion[data-direction="left"].in-view,.motion-ready .scroll-motion[data-direction="right"].in-view{transform:translateZ(0)}
.hero-cinematic .hero-copy{animation:kjcEntrance .95s ease both}
.hero-cinematic .hero-photo{animation:kjcEntrance 1.1s .15s ease both}
.hero-cinematic .hero-photo>img{animation:portraitBreath 10s ease-in-out infinite;transform-origin:center}
.hero-cinematic .hero-slogan{animation:glowLabel 7s ease-in-out infinite}
.hero-cinematic .hero-buttons .btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.card,.person-card,.form,.feature-visual img{transition:transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s ease,border-color .35s ease}
.card:hover,.person-card:hover{transform:translateY(-7px);box-shadow:0 20px 48px rgba(18,62,102,.16);border-color:#accfe5}
.person-card img{transition:transform .65s ease}.person-card:hover img{transform:scale(1.035)}
.btn,.text-link{transition:transform .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(5,31,57,.2)}
.card-icon{transition:transform .4s ease,background .4s ease}.card:hover .card-icon{transform:rotate(-8deg) scale(1.07);background:#d8edfc}
.green-section:before,.page-hero:before{animation:backgroundDrift 24s ease-in-out infinite alternate}
.cta-panel:before{animation:backgroundDrift 20s ease-in-out infinite alternate}
@keyframes kjcEntrance{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes portraitBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes glowLabel{0%,100%{box-shadow:0 0 0 rgba(37,158,231,0)}50%{box-shadow:0 0 24px rgba(37,158,231,.16)}}
@keyframes backgroundDrift{from{background-position:center center}to{background-position:55% 48%}}
@media(max-width:750px){.brand-updated{min-width:0;gap:8px}.brand-updated img{width:76px;max-height:48px}.brand-updated .brand-name{font-size:14px}.brand-updated .brand-caption{font-size:8px;letter-spacing:.05em}.hero-cinematic .hero-photo>img{animation:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.motion-ready .scroll-motion,.motion-ready .scroll-motion[data-direction],.motion-ready .scroll-motion.in-view{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.hero-cinematic .hero-copy,.hero-cinematic .hero-photo,.hero-cinematic .hero-photo>img,.hero-cinematic .hero-slogan,.green-section:before,.page-hero:before,.cta-panel:before{animation:none!important}.card,.person-card,.person-card img,.card-icon,.btn{transition:none!important}.card:hover,.person-card:hover,.person-card:hover img{transform:none!important}}

/* Official 2026 mission content styling */
.official-vision{background:linear-gradient(150deg,#eef6fb,#ffffff)}
.official-vision .section-heading{max-width:880px}
.official-programs .section-heading{max-width:790px}
.official-contact{margin:20px 0 26px;padding:20px;border-left:4px solid #f28b1e;background:#eef6fb;border-radius:12px}
.official-contact h3{margin:0 0 8px;font-size:1.15rem}
.official-contact p{margin:0 0 5px;font-weight:700;color:#123e66}
.official-contact a:hover{text-decoration:underline}