/* Material, light and motion. A restrained second layer over the editorial layout. */
:root{--surface-image:url('/assets/petroleum-satin.webp');--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.2,.65,.3,1)}
body{background:#f5f7f4}
.topbar{background:#031f28;border-color:#b5dfdc14}
.header{isolation:isolate;background:rgba(4,37,47,.92);border-bottom-color:#c5ecef20;box-shadow:0 1px 0 #00171b5c;transition:background .45s,box-shadow .45s;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.header.is-scrolled{background:rgba(3,32,41,.94);box-shadow:0 8px 32px #00191f33,0 1px 0 #a2d0ca25}
.header-glow{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.header-glow:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0%,#39baaa1b,transparent 52%);opacity:.8;animation:header-breathe 13s ease-in-out infinite alternate}
.header-glow:after{content:'';position:absolute;bottom:0;left:-30%;width:30%;height:1px;background:linear-gradient(90deg,transparent,#c7f49eaa,transparent);animation:header-light-pass 2.8s var(--ease-out) .4s both}
.nav{height:92px;transition:height .45s var(--ease-out)}
.header.is-scrolled .nav{height:78px}
.nav>.logo,.nav>a>.logo{transition:transform .45s var(--ease-out),filter .3s}
.header.is-scrolled .nav>a>.logo{transform:scale(.91);transform-origin:left center}
.navlinks{gap:24px}
.navlinks a:not(.btn){padding:11px 8px;color:#d5e5e5;transition:color .3s,background .3s;border-radius:5px}
.navlinks a:not(.btn):hover{color:white;background:#a7eab710}
.navlinks a:not(.btn):after{content:'';position:absolute;left:8px;bottom:4px;width:calc(100% - 16px);height:1px;background:#b5ef83;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.navlinks a:not(.btn):hover:after,.navlinks a.active:after{transform:scaleX(1)}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:linear-gradient(90deg,#6ed7b4,#b4f566);transform:scaleX(var(--read-progress,0));transform-origin:left;pointer-events:none}
/* The button face, bevel and cast shadow behave like a small physical key. */
.btn{--face-top:#d3fda9;--face-mid:#a9ec64;--face-bottom:#8ed049;--rim:#dfffc1;--base:#4b813a;--cast:#001f2945;position:relative;isolation:isolate;overflow:hidden;min-height:52px;padding:14px 25px;border:1px solid #c4f198;border-bottom-color:#7caf52;border-radius:9px;background:radial-gradient(ellipse at 38% -35%,#fff9,transparent 69%),linear-gradient(180deg,var(--face-top) 0%,var(--face-mid) 49%,var(--face-bottom) 100%);box-shadow:inset 0 1px 0 #ffffffba,inset 0 -1px 1px #2f5c1838,0 3px 0 var(--base),0 7px 12px var(--cast);text-shadow:0 1px 0 #fff5;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),filter .25s}
.btn:before{content:'';pointer-events:none;position:absolute;inset:2px;border:1px solid #ffffff20;border-radius:6px}
.btn:after{content:'';pointer-events:none;position:absolute;inset:-60% auto -60% -50%;width:25%;background:linear-gradient(90deg,transparent,#fff6,transparent);transform:skewX(-24deg) translateX(0);transition:none;opacity:0}
.btn:hover{background:radial-gradient(ellipse at 38% -35%,#fff9,transparent 69%),linear-gradient(180deg,var(--face-top) 0%,var(--face-mid) 49%,var(--face-bottom) 100%);transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffffd0,inset 0 -1px 1px #2f5c1838,0 5px 0 var(--base),0 12px 20px var(--cast);filter:brightness(1.025)}
.btn:hover:after{transform:skewX(-24deg) translateX(750%);opacity:.65;transition:transform .8s var(--ease-out),opacity .2s}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0002,0 1px 0 var(--base),0 3px 6px var(--cast);transition-duration:.09s}
.btn.dark{--face-top:#225260;--face-mid:#123f4b;--face-bottom:#0b313d;--base:#011b24;--cast:#04252e32;color:#f4fcfa;border-color:#325f67;border-bottom-color:#0e242d;background:radial-gradient(ellipse at 38% -45%,#ffffff19,transparent 75%),linear-gradient(180deg,var(--face-top),var(--face-mid) 45%,var(--face-bottom));box-shadow:inset 0 1px 0 #b8e2df55,inset 0 -1px 1px #0003,0 3px 0 var(--base),0 8px 14px var(--cast);text-shadow:0 1px 2px #00182055}
.btn.dark:hover{background:radial-gradient(ellipse at 38% -45%,#ffffff19,transparent 75%),linear-gradient(180deg,var(--face-top),var(--face-mid) 45%,var(--face-bottom));box-shadow:inset 0 1px 0 #b8e2df70,0 5px 0 var(--base),0 12px 20px var(--cast)}
.btn.light{--face-top:#fff;--face-mid:#f3f8f3;--face-bottom:#d9e8e0;--base:#9db6a7;--cast:#00192360;border-color:#f3fff5;background:linear-gradient(180deg,var(--face-top),var(--face-mid) 52%,var(--face-bottom));text-shadow:0 1px 0 white}
.btn.light:hover{background:linear-gradient(180deg,var(--face-top),var(--face-mid) 52%,var(--face-bottom))}
.btn.dark:active,.btn.light:active{box-shadow:inset 0 2px 4px #0002,0 1px 0 var(--base),0 3px 6px var(--cast)}
.navlinks .btn{min-height:45px;padding:11px 23px;font-size:13px;border-radius:8px}
.textlink{position:relative;border-bottom-color:#6e8a8080;transition:color .2s,border-color .2s;padding-bottom:6px}
.textlink:hover{color:var(--jade);border-bottom-color:currentColor}
.hero .textlink:hover,.impact .textlink:hover{color:#d3ffad}
/* The opening retains real photography, framed by tactile surfaces and light. */
.hero{position:relative;isolation:isolate;padding-top:65px;background-color:#032833;background-image:linear-gradient(90deg,#031f29ab 0%,#052f3840 60%,#03273388),var(--surface-image);background-size:cover;background-position:center}
.hero>.wrap{position:relative;z-index:2}
.ambient-light{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient-light:before{content:'';position:absolute;width:75vw;height:75vw;min-width:700px;min-height:700px;right:-32%;top:-75%;border-radius:50%;background:radial-gradient(ellipse,#8bdb802e 0%,#2e928f1c 37%,transparent 64%);animation:ambient-drift 16s ease-in-out infinite alternate;transform-origin:center}
.hero-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;opacity:.5}
.hero-lines i{position:absolute;display:block;width:800px;height:800px;border:1px solid #c5efd711;border-radius:50%;top:-255px;right:-170px;transform:rotate(-20deg)}
.hero-lines i:nth-child(2){width:880px;height:880px;top:-295px;right:-210px;border-color:#c5efd70b}
.hero-lines i:nth-child(3){width:960px;height:960px;top:-335px;right:-250px;border-color:#c5efd709}
.hero h1{font-weight:600;letter-spacing:-.055em;line-height:1.055;text-shadow:0 3px 26px #00171d24}
.hero h1 em{display:inline-block;background:linear-gradient(110deg,#d0ffac 0%,#b3f471 43%,#81d78b 100%);color:#b4f577;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative}
.hero-copy>.eyebrow{color:#c5dbd7;letter-spacing:.16em}
.hero-copy>.eyebrow:before{width:24px;background:#b2ec77;box-shadow:0 0 12px #b2ec7740}
.hero p{color:#cbdcdb;max-width:450px}
.hero-grid{gap:65px;align-items:center}
.hero-copy{padding-bottom:55px}
.hero-media{--photo-radius:125px 22px 22px 22px;min-height:540px;margin:0 0 45px;perspective:1200px;border-radius:var(--photo-radius);isolation:isolate;box-shadow:0 24px 42px -15px #001418aa,0 2px 4px #001c2866;transform-style:preserve-3d}
.photo-window{position:absolute;inset:0;overflow:hidden;border-radius:var(--photo-radius);background:#164a52}
.photo-window>img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.03);transform:scale(1.03);animation:photo-settle 1.5s var(--ease-out) both;will-change:auto}
.hero-media:before{content:'';position:absolute;z-index:4;inset:-1px;border-radius:var(--photo-radius);border:1px solid #d9fbe84a;box-shadow:inset 1px 1px 1px #ebfff34a,inset -1px -1px 0 #ffffff19;pointer-events:none}
.hero-media:after{border-radius:var(--photo-radius);background:linear-gradient(180deg,#001b2110 35%,#04263033 57%,#02212dd9 100%);pointer-events:none;z-index:1}
.photo-label{bottom:26px;left:30px;right:25px;align-items:end;gap:15px;color:#dae7df}
.photo-label strong{font-family:Manrope;font-size:24px;line-height:1.23;margin-bottom:10px;letter-spacing:-.035em;color:white}
.photo-label>span:last-child{font-size:9px;letter-spacing:.15em;writing-mode:vertical-rl;opacity:.8}
.orbit-label{z-index:5;right:-20px;top:27px;width:108px;height:108px;font-size:11px;letter-spacing:.04em;border:1px solid #e0fbb7;background:radial-gradient(ellipse at 30% 10%,#eaffc3 0%,#c3f08a 30%,#9ad258 77%,#87bb48);box-shadow:inset 0 2px 2px #ffffffa0,inset 0 -3px 5px #50862c60,1px 4px 0 #59853d,5px 12px 22px #00182066;text-shadow:0 1px 0 #ffffff40;animation:badge-arrive 1.1s var(--ease-out) .3s both}
.orbit-label:before{content:'';position:absolute;inset:6px;border:1px solid #668e4566;border-radius:50%;box-shadow:0 1px 0 #f3ffd352}
.hero-bottom{border-top-color:#c0e6d92b;padding:24px 0 26px;position:relative}
.hero-bottom:before{content:'';position:absolute;top:-1px;left:0;width:70px;height:1px;background:#c6ef94}
.hero-bottom .tags{color:#bbd0ca;font-size:11px;letter-spacing:.12em}
.scroll-label{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.12em;color:#bddbb1}
.scroll-label:after{content:'';display:block;width:30px;height:1px;background:#b9ed834d;box-shadow:-11px 0 0 #b9ed83;animation:scroll-prompt 2.5s ease-in-out 2}
/* Bright sections have a quiet paper-like finish; dark sections share the brand material. */
.section:not(.impact):not(.news-section){position:relative;background-image:radial-gradient(#173f3210 .6px,transparent .7px);background-size:5px 5px}
.intro h2 span{color:#64837b}
.program-main{border-radius:18px;box-shadow:0 20px 40px -28px #022d3c99}
.program-main:before{content:'';position:absolute;inset:0;border:1px solid #ffffff40;border-radius:inherit;z-index:3;pointer-events:none}
.program-main:after{background:linear-gradient(0deg,#032b38fa 2%,#032b38a6 30%,transparent 95%)}
.program-small{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(130deg,#eef5ee,#e0eae3);border:1px solid #d0ded2;box-shadow:inset 0 1px 1px #fff,0 7px 16px -14px #092f34;transition:box-shadow .4s,transform .4s var(--ease-out)}
.program-small:last-child{background:radial-gradient(ellipse at 100% 0%,#e1ffacb3,transparent 67%),linear-gradient(130deg,#b9ed85,#a7de70);border-color:#afcf8c}
.program-small:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--surface-image);background-size:cover;opacity:.025;mix-blend-mode:multiply}
.program-small>div,.program-small>.number{position:relative}
.program-small:hover{background:linear-gradient(130deg,#eef5ee,#e0eae3);box-shadow:inset 0 1px 1px #fff,0 16px 30px -24px #092f3480;transform:translateY(-3px)}
.program-small:last-child:hover{background:radial-gradient(ellipse at 100% 0%,#e1ffacb3,transparent 67%),linear-gradient(130deg,#b9ed85,#a7de70)}
.pill{background:#072d3a50;border-color:#d1eada60;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #ffffff24}
.impact{background-image:linear-gradient(100deg,#032a34c9,#042a34ad),var(--surface-image);background-position:center;background-size:cover;border-top:1px solid #36564c;border-bottom:1px solid #143e44}
.stats{gap:16px 24px}
.stat{padding:27px 0;border-top-color:#c9e5c929}
.stat strong{color:#bcf386;text-shadow:0 2px 2px #001c2280}
.stat small{color:#aebfbd}
.hub-photo{isolation:isolate}
.hub-photo:before{content:'';position:absolute;inset:15px -12px -12px 16px;border:1px solid #a5c6b8;border-radius:14px 85px 14px 14px;z-index:-1}
.hub-photo img{border-radius:14px 85px 14px 14px;box-shadow:0 20px 35px -25px #123f4975}
.hub-photo .caption{border-radius:6px;background:linear-gradient(135deg,#fffefaed,#e8f1e6ed);border:1px solid #fafff4;box-shadow:inset 0 1px 0 white,0 6px 18px #09272c30;backdrop-filter:blur(12px)}
.news-section{background-color:#e9eeea;background-image:linear-gradient(120deg,#f1f5ef99,#dce6df30),repeating-linear-gradient(135deg,transparent 0px,transparent 5px,#1a4b3510 5px,#1a4b3510 5.5px);border-block:1px solid #d5e1d7}
.news-image{border-radius:12px;border:1px solid #123d381c;box-shadow:0 8px 18px -15px #092c3b80}
.news-graphic{position:relative;background-image:linear-gradient(110deg,#073643e6,#07364370),var(--surface-image);background-size:cover;color:#d0f8aa;text-shadow:0 2px 6px #082f3633}
.news-graphic.alt{background:radial-gradient(ellipse at right top,#e6f7d1,#bed9c6 75%);color:#154138}
.news-graphic:after{content:'';position:absolute;inset:14px;border:1px solid #b9d7c535;border-radius:4px;pointer-events:none}
.cta{position:relative;isolation:isolate;background:radial-gradient(ellipse at 80% 0%,#efffd077,transparent 55%),linear-gradient(115deg,#bcec8a,#b2df7d);border-top:1px solid #d5e9ad;border-bottom:1px solid #7fa854;overflow:hidden}
.cta:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:var(--surface-image);background-size:cover;mix-blend-mode:multiply;opacity:.035}
.cta .btn{flex-shrink:0}
.footer{background-image:linear-gradient(0deg,#021c25e8,#042a34da),var(--surface-image);background-size:cover}
.footer a{transition:color .2s}.footer a:hover{color:#c8f59e}
.page-hero{background-image:linear-gradient(90deg,#031f29b5,#052f3850),var(--surface-image);background-size:cover;background-position:center 65%;border-bottom:1px solid #c8eab82a}
.page-hero h1{font-weight:500;letter-spacing:-.05em}
.contact-card{background:linear-gradient(135deg,#f1f6ee,#e3ece3);border:1px solid #d4dfd3;border-radius:14px;box-shadow:inset 0 1px 0 white,0 12px 20px -20px #123d35}
.filter{box-shadow:inset 0 1px 0 #fff7;transition:background .2s,box-shadow .2s}.filter.active{background:linear-gradient(#194753,#082e39);box-shadow:inset 0 1px 0 #7f9f9a55,0 2px 0 #092731}
.searchbox{border-radius:8px;box-shadow:inset 0 2px 4px #163b3208,0 1px 0 white}
.document{transition:background .2s}.document:hover{background:#ecf1eaa6}
@keyframes header-breathe{0%{transform:translateX(-8%);opacity:.45}100%{transform:translateX(8%);opacity:1}}
@keyframes header-light-pass{0%{transform:translateX(0);opacity:0}20%{opacity:1}100%{transform:translateX(450%);opacity:0}}
@keyframes ambient-drift{0%{transform:translate3d(-4%,0,0) scale(.9);opacity:.5}100%{transform:translate3d(3%,12%,0) scale(1.12);opacity:1}}
@keyframes photo-settle{from{transform:scale(1.09)}to{transform:scale(1.03)}}
@keyframes badge-arrive{from{transform:translateY(10px) rotate(18deg);opacity:0}to{transform:translateY(0) rotate(10deg);opacity:1}}
@keyframes scroll-prompt{0%,100%{box-shadow:-11px 0 0 #b9ed83}50%{box-shadow:0 0 0 #b9ed83}}
@media(min-width:801px) and (max-width:1150px){.hero-grid{gap:40px}.hero-media{min-height:520px}.navlinks{gap:12px}.navlinks a:not(.btn){padding-inline:5px}.hero h1{font-size:4.3rem}.hero .actions{gap:18px}}
@media(max-width:800px){.nav,.header.is-scrolled .nav{height:78px}.navlinks.open{border-bottom:1px solid #a2cbb13b;background:rgba(3,32,41,.98);padding-bottom:28px}.navlinks a:not(.btn){padding:13px 8px}.navlinks a:after{max-width:32px}.navlinks .btn{padding-block:13px;font-size:15px}.hero{padding-top:40px;background-position:35% center}.hero-grid{gap:0}.hero-copy{padding-bottom:40px}.hero h1{font-size:clamp(3.2rem,9vw,4.8rem)}.hero-media{min-height:380px;margin:0 4px 32px 26px;--photo-radius:90px 18px 18px 18px}.orbit-label{right:-10px;top:19px;width:95px;height:95px;font-size:10px}.hero-bottom{padding:22px 0}.hero-bottom .tags{flex-wrap:wrap;font-size:10px;gap:12px 24px}.scroll-label{display:none}.ambient-light:before{right:-110%;top:-30%;opacity:.5}.hero-lines{opacity:.4}.program-small:hover{transform:none}.hub-photo:before{inset:10px -7px -9px 12px}.hub-photo .caption{font-size:12px;left:18px;bottom:18px}.cta .btn{margin-top:32px}.photo-label>span:last-child{font-size:8px}.hero-media:before{inset:0}}
@media(max-width:480px){.hero h1{font-size:clamp(2.8rem,12.2vw,3.45rem)}.hero{padding-top:32px}.hero-copy>.eyebrow{font-size:10px;letter-spacing:.11em;margin-bottom:25px}.hero-copy>.eyebrow:before{width:15px;margin-right:9px}.hero p{font-size:16px;max-width:340px;margin:24px 0 29px}.hero-media{min-height:320px;margin-left:16px;margin-bottom:26px;--photo-radius:75px 14px 14px 14px}.photo-label{left:22px;bottom:21px}.photo-label strong{font-size:22px}.orbit-label{width:88px;height:88px;right:-6px;top:15px}.hero-bottom .tags{font-size:9px;gap:8px 17px;letter-spacing:.08em}.hero .actions{gap:24px 18px;align-items:center}.hero .actions .btn{font-size:13px;padding:14px 20px;min-height:49px}.hero .actions .textlink{font-size:12px}.hub-photo .caption{max-width:calc(100% - 35px)}.btn{font-size:14px}.cta .btn{max-width:100%;overflow-wrap:anywhere}.navlinks{top:78px}.hero-lines i{right:-500px}.page-hero h1{font-size:2.7rem}.topbar .wrap{gap:12px}.program-main .card-copy{padding-bottom:33px}}
@media(hover:none){.btn:hover{transform:none}.btn:hover:after{display:none}.btn:active{transform:translateY(2px)}}
@media(prefers-reduced-motion:reduce){.header-glow:before,.header-glow:after,.ambient-light:before,.scroll-label:after,.orbit-label,.photo-window>img{animation:none!important}.btn,.btn:after,.nav,.hero-media,.navlinks a:after,.program-small{transition:none!important}.orbit-label{transform:rotate(10deg)}.header.is-scrolled .nav>a>.logo{transform:none}.hero h1 em{-webkit-text-fill-color:#b4f577;background:none}.anim-ready .scroll-reveal{opacity:1;transform:none}}
/* Keep the opening statement in deliberate, balanced lines. */
@media(min-width:1151px){.hero h1{font-size:clamp(3.8rem,5.05vw,5.2rem);font-weight:550}.hero-media{min-height:535px}.hero-copy{padding-bottom:42px}}
@media(min-width:801px) and (max-width:1150px){.hero h1{font-size:clamp(3rem,5.3vw,3.85rem)}}
@media(max-width:480px){.hero h1{font-size:clamp(2.55rem,10.6vw,3.05rem);line-height:1.1;font-weight:550}.hero-copy{padding-bottom:34px}}
