/* Spatial landing page inspired by the supplied warm interior reference. */
:root { --primary:#176b99; --primary-dark:#164e70; --primary-mid:#2589b4; --primary-soft:#eaf5f8; --bg:#f4eee5; --border:#e2d9cd; --text:#263d49; --muted:#6c7c81; --radius:16px; }
body { background:#f4eee5; color:#263d49; }
body:before { display:none; }
.container { width:min(1400px,92%); }
.topbar { background:#203c4b; border:0; font-size:12px; }
.top-login-link { border-radius:5px; background:#ffffff0b; border-color:#ffffff25; box-shadow:none; }
.header { background:#faf7f0; border:0; }
.header-inner { padding:20px 0; }
.logo-wrap { width:64px; height:64px; background:#fff8; border:1px solid #fff; border-radius:50%; box-shadow:0 8px 15px #66523e14; }
.title-area h1 { color:#203c4b; font-size:32px; letter-spacing:-.04em; }
.title-area small { color:#71818a; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.title-area p { color:#637781; font-size:14px; }
.header-badge { background:#fff9; color:#396273; border:1px solid #fff; box-shadow:none; }
.nav { background:#faf7f0; border-bottom:1px solid #e0d8cd; box-shadow:none; position:relative; top:auto; }
.nav-inner { min-height:54px; }
.menu { gap:8px; }
.menu a { color:#345463; border-radius:30px; font-size:14px; padding:10px 20px; }
.menu a:hover { color:#176b99; background:#fff; }
.nav-note { color:#74848a; font-size:11px; }
.menu-btn { background:#fff; color:#345463; border-color:#e0d8cd; }
.spatial-stage { position:relative; isolation:isolate; overflow:hidden; padding:64px 0 90px; background:linear-gradient(145deg,#f8f3e8 0%,#d9cbb7 55%,#bca78d 100%); perspective:1400px; }
.spatial-stage:before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(32deg,#fffcf3b0 0%,#fffcf3b0 25%,transparent 25.2%),linear-gradient(90deg,transparent 85%,#77604722 85%,#77604711 86%,transparent 86.5%); }
.spatial-stage:after { content:''; position:absolute; bottom:0; left:0; right:0; height:90px; z-index:-1; background:linear-gradient(#cbbba780,#f3e9d8); border-top:1px solid #fff7; box-shadow:0 -18px 50px #fff8; }
.intro { position:relative; width:min(1250px,85%); margin:0 auto; overflow:visible; border-radius:22px; border:1px solid #c9f5ff60; background:radial-gradient(ellipse at 36% 5%,#82c8d7,#438da9 45%,#126191 100%); box-shadow:inset 0 1px 0 #ffffff80,0 5px 0 #216d8b,0 32px 35px -24px #34586c80,0 55px 55px -40px #48372180; transform:rotateY(-3deg) rotateX(2deg); }
.intro:before,.intro:after { display:none; }
.intro-inner { min-height:450px; padding:48px 40px; display:grid; grid-template-columns:1.5fr 1fr; gap:50px; align-items:center; perspective:1000px; }
.intro-text .label { background:#ffffff14; border:1px solid #ffffff40; color:#f3faff; border-radius:30px; padding:7px 13px; font-size:11px; }
.intro-text h2 { font-size:clamp(28px,3.2vw,46px); color:#fff; line-height:1.4; letter-spacing:-.025em; text-shadow:0 3px 10px #17526b20; }
.intro-text p { color:#e5f4f8; font-size:16px; line-height:1.85; }
.intro-chip { background:#ffffffed; color:#285d77; border:1px solid #fff; border-radius:30px; box-shadow:0 7px 14px #17496a22; font-size:11px; }
.intro-chip:before { background:#efb36c; }
.intro-logo { position:relative; width:250px; height:250px; padding:45px; border:0; border-radius:50%; background:radial-gradient(circle at 30% 22%,#fff2cf,#f0bd7e 40%,#db8250 75%,#ab552b); box-shadow:inset -18px -20px 30px #a5523545,inset 12px 14px 30px #ffffff65,22px 28px 36px #08496655; transform:rotateY(-15deg) rotateZ(6deg); animation:spatialFloat 7s ease-in-out infinite; }
.intro-logo img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 8px #67503640); }
.intro-logo:before { content:''; position:absolute; width:155px; height:70px; left:-65px; bottom:15px; border-radius:80px; background:linear-gradient(145deg,#f4fffc,#b9e7e0 55%,#80c5cd); box-shadow:inset 0 9px 16px #fff9,0 18px 24px #1a5b7135; transform:rotate(-8deg); }
.intro-logo:after { content:''; position:absolute; width:90px; height:90px; right:-50px; top:15px; border-radius:50%; background:radial-gradient(circle at 30% 20%,#fff7e6,#c3c4b8 65%,#8b978d); box-shadow:14px 22px 24px #17496a30; }
.scene-sphere { position:absolute; border-radius:50%; background:radial-gradient(circle at 25% 20%,#fffcf0,#d2d2bf 50%,#919e91 100%); box-shadow:inset -20px -20px 40px #66786920,16px 32px 38px #76665020; }
.scene-sphere-one { width:230px; height:230px; left:2%; top:15px; z-index:-1; }
.scene-sphere-two { width:110px; height:110px; right:3%; bottom:22px; z-index:2; }
.scene-pedestal { position:absolute; width:400px; height:35px; left:50%; bottom:35px; transform:translateX(-50%); border-radius:50%; background:linear-gradient(#f8e2ba,#b48652); box-shadow:0 16px 16px #5c412d25; }
.scene-pedestal:after { content:''; position:absolute; top:23px; left:145px; width:110px; height:45px; background:linear-gradient(90deg,#aa754b,#e2b784,#8b603e); clip-path:polygon(25% 0,75% 0,100% 100%,0 100%); }
@keyframes spatialFloat { 0%,100% { transform:rotateY(-15deg) rotateZ(6deg) translateY(0); } 50% { transform:rotateY(-8deg) rotateZ(3deg) translateY(-12px); } }
.ticker { background:#faf7f0; border:0; }
.ticker-inner { border:0; }
.ticker-label { background:#bc8952; }
.ticker-content { color:#80613f; }
.main { padding:36px 0; }
.landing-grid { grid-template-columns:minmax(0,1fr) 300px; gap:28px; }
.section-card,.side-card,.team-horizontal-card { border:1px solid #ffffff; background:#fffcf6; border-radius:18px; box-shadow:0 3px 0 #e2d8ca,0 14px 28px -20px #79644945; }
.section-card { margin-bottom:24px; }
.section-card:after { background:linear-gradient(90deg,#438da9,#ddb079,transparent); }
.section-header { background:linear-gradient(120deg,#f2f6f4,#fffaf0); border-bottom-color:#e6dfd3; padding:18px 22px; }
.section-header:before { display:none; }
.section-header h3 { color:#285568; }
.section-kicker { color:#8a6a45; background:#ede4d6; }
.section-kicker:before { background:#bc8952; }
.section-body { padding:22px; }
.section-body p { color:#4d6069; }
.feature-block,.glance-card,.revenue-card,.team-member,.quick-action { border-radius:14px; border-color:#e4e0d6; background:linear-gradient(145deg,#fffdf7,#eaf3f3); box-shadow:0 5px 0 #dfdfd4,0 15px 20px -18px #4a697050; }
.feature-icon,.quick-action b { background:#deeff2; color:#277797; border-radius:50%; }
.side-card-title { background:#367e9c; border-bottom:3px solid #dbb583; }
.officer-card { border-color:#e5e0d5; }
.officer-photo img,.officer-photo-2 img { border:4px solid #fffdf6; box-shadow:0 8px 14px #60777920; }
.team-horizontal-head { border-color:#e2dacd; }
.team-badge { background:#367e9c; border-radius:30px; }
.blessing-band { background:#eee6da; border-color:#e0d5c5; }
.footer { background:#203c4b; }
@media (max-width:980px) { .intro-inner { grid-template-columns:1fr 230px; padding:36px 26px; gap:24px; } .intro-logo { width:210px; height:210px; padding:38px; } .landing-grid { grid-template-columns:1fr; } .official-sidebar { position:static; } }
@media (max-width:700px) { .spatial-stage { padding:35px 0 70px; } .intro { width:90%; transform:none; } .intro-inner { grid-template-columns:1fr; padding:28px 22px 42px; gap:40px; text-align:left; } .intro-logo { width:180px; height:180px; padding:30px; margin:auto; } .intro-text h2 { font-size:28px; } .intro-text p { font-size:14px; } .intro-logo:before { width:110px; height:55px; left:-35px; } .intro-logo:after { width:65px; height:65px; right:-30px; } .scene-sphere-one { width:140px; height:140px; left:-30px; } .scene-sphere-two { width:70px; height:70px; right:-10px; } .scene-pedestal { width:260px; bottom:20px; } .scene-pedestal:after { left:85px; width:90px; } .title-area h1 { font-size:27px; } .header-inner { padding:16px 0; } }
@media (prefers-reduced-motion:reduce) { .intro-logo { animation:none; } }
.intro-text { min-width:0; width:100%; max-width:100%; }
.intro-text p { max-width:100%; }
.intro-logo { justify-self:center; }
.district-page-heading { padding:30px 0; background:linear-gradient(120deg,#e5f2f4,#f5ead8); border-bottom:1px solid #e2d9cd; color:#637781; font-size:13px; }
.district-page-heading a { color:#176b99; }
.district-page-heading h2 { margin:12px 0 0; font-size:32px; color:#203c4b; }
.district-page > .container { max-width:1200px; }

/* Additional homepage depth and motion, preserving the current palette. */
.spatial-stage { --scene-x:0deg; --scene-y:0deg; }
.intro { transform:perspective(1400px) rotateX(var(--scene-x,2deg)) rotateY(var(--scene-y,-3deg)); transition:transform .6s ease,box-shadow .6s ease; transform-style:preserve-3d; }
.intro:after { display:block; content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg,transparent 20%,#ffffff18 42%,transparent 64%); animation:spatialReflection 12s ease-in-out infinite; }
.intro-text { transform:translateZ(25px); }
.intro-logo { transform-style:preserve-3d; animation:spatialSculpture 8s ease-in-out infinite; }
.intro-logo:before { animation:spatialCloud 6s ease-in-out infinite; }
.intro-logo:after { animation:spatialOrb 7s ease-in-out infinite; }
.scene-sphere-one { animation:spatialAmbient 10s ease-in-out infinite; }
.scene-sphere-two { animation:spatialAmbient 8s ease-in-out infinite reverse; }
.scene-pedestal { animation:spatialPedestal 8s ease-in-out infinite; }
.intro-chip { transition:transform .3s ease,box-shadow .3s ease; }
.intro-chip:hover { transform:translateY(-5px); box-shadow:0 12px 18px #17496a35; }
.spatial-stage ~ .main .section-card, .spatial-stage ~ .main .side-card, .spatial-stage ~ .main .team-horizontal-card { transition:transform .4s ease,box-shadow .4s ease; }
.spatial-stage ~ .main .spatial-motion { transform:perspective(1200px) rotateX(var(--panel-x,0deg)) rotateY(var(--panel-y,0deg)) translateY(-4px); box-shadow:0 4px 0 #e2d8ca,0 22px 34px -22px #79644965; }
.spatial-stage ~ .main .feature-block { transition:transform .35s ease,box-shadow .35s ease; }
.spatial-stage ~ .main .feature-block:hover { transform:perspective(700px) rotateY(-5deg) rotateX(4deg) translateY(-7px); }
@keyframes spatialReflection { 0%,100% { opacity:.2; transform:translateX(-12px); } 50% { opacity:.8; transform:translateX(12px); } }
@keyframes spatialSculpture { 0%,100% { transform:rotateY(-15deg) rotateZ(6deg) translateY(0); } 50% { transform:rotateY(8deg) rotateZ(-3deg) translateY(-16px); } }
@keyframes spatialCloud { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(-3deg) translateY(-8px); } }
@keyframes spatialOrb { 0%,100% { transform:translate(0,0); } 50% { transform:translate(5px,-14px); } }
@keyframes spatialAmbient { 0%,100% { translate:0 0; } 50% { translate:0 -15px; } }
@keyframes spatialPedestal { 0%,100% { box-shadow:0 16px 16px #5c412d25; } 50% { box-shadow:0 20px 24px #5c412d35; } }
@media (hover:none) { .intro { transform:none; } .spatial-motion { transform:none !important; } }
@media (prefers-reduced-motion:reduce) { .spatial-stage *, .spatial-stage *:before, .spatial-stage *:after { animation:none !important; transition:none !important; } .intro,.intro-logo,.spatial-motion { transform:none !important; } }
.intro:after { width:auto; height:auto; top:0; right:0; bottom:0; left:0; background:linear-gradient(115deg,transparent 20%,#ffffff18 42%,transparent 64%); }

/* Stronger pointer lighting and visible physical depth. */
.intro { border-bottom:3px solid #1c6486; border-right:3px solid #286e8d; box-shadow:inset 0 2px 0 #ffffff65,3px 4px 0 #2a7e9f,6px 8px 0 #216d8c,9px 12px 0 #185873,0 40px 45px -25px #34586c99,0 60px 60px -40px #48372180; transition:transform .18s ease-out,box-shadow .3s ease; }
.intro:after { background:radial-gradient(ellipse at var(--light-x,25%) var(--light-y,15%),#ffffff40,transparent 55%),linear-gradient(115deg,transparent 20%,#ffffff10 42%,transparent 64%); }
.spatial-stage:hover .intro { box-shadow:inset 0 2px 0 #ffffff85,4px 6px 0 #2a7e9f,8px 12px 0 #216d8c,12px 18px 0 #185873,0 50px 55px -25px #34586c99; }
.intro-text { transform:translateZ(45px); }
.intro-logo { translate:0 0 70px; transition:scale .3s ease,filter .3s ease; }
.intro-logo:hover { scale:1.08; filter:drop-shadow(0 18px 12px #17496a40); animation-play-state:paused; }
.intro-chip { transform:translateZ(40px); }
.intro-chip:hover { transform:translateZ(60px) translateY(-8px) rotate(-2deg); }
.spatial-stage ~ .main .section-card, .spatial-stage ~ .main .side-card, .spatial-stage ~ .main .team-horizontal-card { position:relative; border-right:2px solid #d8d0c3; border-bottom:2px solid #cbbfae; box-shadow:2px 3px 0 #e2d8ca,4px 6px 0 #d2c6b5,0 16px 25px -18px #79644950; transition:transform .18s ease-out,box-shadow .3s ease; }
.spatial-stage ~ .main .spatial-motion { transform:perspective(1100px) rotateX(var(--panel-x,0deg)) rotateY(var(--panel-y,0deg)) translateY(-9px); box-shadow:3px 5px 0 #e2d8ca,6px 10px 0 #d2c6b5,9px 15px 0 #c6b8a4,0 30px 38px -20px #79644980; }
.spatial-stage ~ .main .spatial-motion:before { content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; background:radial-gradient(ellipse at var(--light-x,30%) var(--light-y,20%),#ffffff60,transparent 65%); }
.spatial-stage ~ .main .feature-block:hover { transform:perspective(700px) rotateY(-10deg) rotateX(8deg) translateY(-10px); box-shadow:3px 4px 0 #dfdfd4,6px 8px 0 #ccd4cf,0 22px 24px -16px #4a697070; }
@media (hover:none), (prefers-reduced-motion:reduce) { .intro { transform:none; } .intro-logo { translate:none; } .intro-logo:hover { scale:1; } .spatial-stage ~ .main .spatial-motion { transform:none; } }