:root{
 --ink:#17243b;
  --navy:#0d1b2a; 
  --blue:#173b69; 
  --sky:#4d86b9; 
  --gold:#c99a3b;
 --cream:#f7f4ec; 
 --paper:#fffdf8; 
 --muted:#667085; 
 --line:#e7e2d7; 
 --white:#fff;
 --shadow:0 18px 50px rgba(17,34,51,.10); 
 --radius:24px;
}

html{
  scroll-behavior:smooth
}

p {
    font-size: 15px;
     color: #0b0c0e;
    margin: 0 0 15px;
    text-transform: none;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    text-align: justify;
}

.site-shell{
    display:grid;
    grid-template-columns:310px 1fr;
    min-height:100vh;
    padding: 50px 8vw;
}
.sidebarUIW{
    position:sticky;
    top:120px;
    height:95vh;
    background: linear-gradient(180deg, #030066, #1753a7);
    color:#fff;
    padding:0px 20px;
    overflow:auto;
    z-index:50
}

.brand{

    display:flex;
    align-items:center;
    gap:13px;
    padding:10px 8px 28px;
    border-bottom:1px solid rgba(255,255,255,.15)
}

.brand-mark{

    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:14px;
    display:grid;
    place-items:center;
    
    font-size:23px
}

.brand strong{

    display:block;
    font-size:14px;
    letter-spacing:.05em
}

.brand small{

    opacity:.65;
    font-size:11px
}

.navUIW{

    padding:5px 0
}

.navUIW a{

    display:flex;
    align-items:center;
    gap:11px;
    padding: 5px 10px;
    border-radius:12px;
    color:#fff;
    font-size:15px;
    margin:2px 0;
    transition:.25s;
    font-weight: 500;
}

.navUIW a span{

    width:24px;
    color:#d8b76a;
    font-weight:700;
    font-size:10px
}

.navUIW a:hover,
.navUIW a.active{
    background:rgba(255,255,255,.16);
    color:#fff;
    transform:translateX(3px);
}

.navUIW a.active{
    background:linear-gradient(90deg, rgba(255,255,255,.20), rgba(201,154,59,.22));
    color:#fff;
    font-weight:700;
    border-left:3px solid var(--gold);
    padding-left:9px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.side-note{

    font-size:11px;
    color:rgba(255,255,255,.5);
    padding:20px 10px;
    border-top:1px solid rgba(255,255,255,.1)
}


.heroUIW{
    background:radial-gradient(circle at 80% 20%, rgba(201, 154, 59, .26), transparent 28%), linear-gradient(110deg, #040369 0%, #1855a9 54%, #1855a9 100%);
    position:relative;
/*    min-height:92vh;
    overflow:hidden;
    color:#fff;
    display:flex;
    align-items:flex-end*/
}

.heroUIW::before{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgb(4 1 103) 0%, rgb(5 9 109 / 60%) 52%, rgba(10, 34, 57, .15) 100%);
}

.heroUIW::after{

    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    right:-130px;
    top:-90px;
    box-shadow:0 0 0 70px rgba(255,255,255,.03),0 0 0 140px rgba(255,255,255,.02)
}

.heroUIW-content{
    position:relative;
    z-index:2;
   padding: 40px 4vw;
}

.kicker,.eyebrow{

    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-weight:700;
    color:var(--gold)
}

.heroUIW h1{
    font-size:45px;
    line-height:1.02;
    color:#fff;
}

.heroUIW h1 em{
    font-weight:500;
    color:#d8b76a;
    font-size:40px;
    line-height: 1.02;
}

.heroUIW .lead{

    font-size: 15px;
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
}

.heroUIW-actions{

    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:34px
}

.bnUIW{

    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:12px 18px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    font-size:12px;
    font-weight:700;
    transition:.25s
}

.bnUIW.primary{

    background:#d3a54c;
    color:#132238;
    border-color:#d3a54c
}

.bnUIW:hover{

    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(0,0,0,.16)
}

.heroUIW-stat{

    position:absolute;
    right:7vw;
    bottom:75px;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.15);
    max-width:500px
}

.heroUIW-stat div{

    background:rgba(9,26,43,.55);
    padding:18px 20px;
    min-width:125px
}

.heroUIW-stat b{

    display:block;
    font-size:22px;
    color:#fff
}

.heroUIW-stat span{

    font-size:10px;
    color:rgba(255,255,255,.6);
    text-transform:uppercase;
    letter-spacing:.1em
}

.section{
        height: 100%;
    background-color: #fff;
    padding:30px 3vw;
    position:relative
}

.section.alt{
    height: 100%;
    background:var(--cream);
}

.section.dark{
       height: 100%;
    background-image: linear-gradient(to right, #030066 20%, #1855a9);
    color:#fff;
}

.section-head{

    margin-bottom:48px
}

.section-head .eyebrow{

    margin-bottom:10px
}

.section-head h2{
    font-size:27px;
    line-height:1.1;
    margin-bottom:18px;
    color:#1b1c1e;
}

.section-head p{

    color:#0b0c0e;
}

.dark .section-head p{

    color:rgba(255,255,255,.68)
}

/*.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}*/

.pullquote{

    padding:20px;
    border-left:3px solid var(--gold);
    background:rgba(201,154,59,.07);
    border-radius:0 var(--radius) var(--radius) 0
}

.pullquote h3{
    font-size:20px;
    line-height:1.25;
    margin-bottom:12px;
    color:#1b1c1e;
    font-weight: 600;
}

.pullquote p{

    font-size:16px;
    color:#4f5e72
}

.copy p{
    color: #0b0c0e;
    margin-bottom:18px
}

.visual-card{

    min-height:440px;
    border-radius:32px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(10,27,44,.15),rgba(10,27,44,.75)),radial-gradient(circle at 30% 25%,#e2bf74,transparent 22%),linear-gradient(135deg,#234f75,#0b1d2d);
    box-shadow:var(--shadow)
}

.visual-card .visual-label{

    position:absolute;
    left:28px;
    bottom:26px;
    color:#fff;
    max-width:330px
}

.visual-card .visual-label strong{

    
    font-size:31px;
    display:block;
    line-height:1.1
}

.visual-card .visual-label small{

    display:block;
    color:rgba(255,255,255,.65);
    margin-top:7px
}

.grid-2{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px
}

.grid-3{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.feature-card{

    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px;
    box-shadow:0 8px 25px rgba(17,34,51,.04);
    transition:.3s;
    position:relative;
    overflow:hidden
}

.feature-card:hover{

    transform:translateY(-6px);
    box-shadow:var(--shadow)
}

.card-number{

    font-size:11px;
    color:var(--gold);
    font-weight:800;
    letter-spacing:.15em
}

.feature-card h3{
    font-size:24px;
    line-height:1.25;
    margin:12px 0
}

.feature-card p{

    font-size:15px;
    color:#657185
}

.pillar-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}


.pillar{

    background:#fff;
    border:1px solid var(--line);
    padding:25px;
    border-radius:20px;
    min-height:260px;
    transition:.3s
}

.pillar:hover{

    background:#f2eadb;
    transform:translateY(-5px)
}


.pillar-icon{

    width:42px;
    height:42px;
    border-radius:12px;
    background:#f1e5ca;
    display:grid;
    place-items:center;
    color:#916b1e;
    font-weight:800;
    margin-bottom:20px
}

.pillar h3{
    color: #1b1c1e;
    font-size:17px;
    margin-bottom:10px;
    margin-top:10px;
}

.pillar p{
    text-align:justify;
    font-size:14px;
    color:#0b0c0e;
}

.two-column{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px
}

.numbered-list{

    display:grid;
    gap:14px
}

.numbered-list li{

    list-style:none;
    display:grid;
    grid-template-columns:38px 1fr;
    gap:12px;
    background:#fff;
    border:1px solid var(--line);
    padding:18px;
    border-radius:17px
}

.numbered-list li::before{
    content:counter(item, decimal-leading-zero);
    counter-increment:item;
    color:#a17a2c;
    font-weight:800
}

.numbered-list{
    counter-reset:item
}

.numbered-list p{

    font-size:14px;
    color:#5f6c7f;
}

.callout{

    margin-top:25px;
    background:#030166;
    color:#fff;
    padding:30px;
    border-radius:20px
}

.callout p{

    color:rgba(255,255,255,.75);
}

.pending{

    border:1px dashed #c9b88f;
    background:#fffaf0;
    padding:26px;
    border-radius:20px;
    color:#6f634a
}

.lead-group{

    margin-bottom:35px
}

.lead-group-title{
    color: #1b1c1e;
    
    font-size:25px;
    margin-bottom:14px
}

.table-wrap{

    overflow:auto;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff
}

table{

    width:100%;
    border-collapse:collapse;
    min-width:650px
}

th,td{
    color: #1b1c1e;
    text-align:left;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    font-size:14px
}

th{
    background:#f1ece2;
    color:#6b5a35;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:15px
}

tr:last-child td{
    border-bottom:0
}

.events{

    display:grid;
    gap:24px
}

.event-card{
/*
    display:grid;
    grid-template-columns:190px 1fr;*/
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(17,34,51,.04)
}

.event-visual{

    background:linear-gradient(145deg, #030167, #1654a8);
    color:#fff;
    min-height:240px;
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.event-visual span{
    font-size:42px;
    color:#d7b36b
}

.event-visual small{

    text-transform:uppercase;
    letter-spacing:.12em;
    color:rgba(255,255,255,.6);
    font-size:9px
}

.event-content{

    padding:28px 32px
}

.event-content h3{
    color: #1b1c1e;
    
    font-size:28px;
    line-height:1.2;
    margin:8px 0 13px
}

.event-meta{

    display:flex;
    gap:16px;
    flex-wrap:wrap;
    font-size:11px;
    color:#0b0c0e;
    margin-bottom:15px
}

.event-content p,.conversation-card p{
    font-size:15px;
    color:#0b0c0e;
}

.conversation-list{

    display:grid;
    gap:18px
}

.conversation-card{
    /*display:grid;
    grid-template-columns:85px 1fr;*/
    gap:22px;
    background:#fff;
    border:1px solid var(--line);
    padding:26px;
    border-radius:22px;
}

.conversation-index{
    
    font-size:28px;
    color:#c29a4c
}

.conversation-card h3{
    
    font-size:25px;
    line-height:1.2;
    margin-bottom:10px;
    color: #282b2e;
    margin-top: 10px;
}

.collab-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.collab-item{
    padding:20px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:rgba(255,255,255,.04);
    font-size:14px
}


.quote-grid{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:20px
}

.quote-card{
    background:#fff;
    border:1px solid var(--line);
    padding:28px;
    border-radius:22px;
    position:relative
}

.quote-mark{
    
    font-size:72px;
    line-height:.7;
    color:#d0ad66;
    position:absolute;
    right:22px;
    top:25px
}

.quote-card h3{
    
    font-size:22px;
    margin:6px 0;
    color: #1b1c1e;
}

.quote-card h4{
    font-size:14px;
    color:#7b6340;
    margin-bottom:15px
}

.quote-card p{
    font-size:14px;
    color:#0b0c0e;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.gallery-tile{
    aspect-ratio:1/1;
    border-radius:18px;
    background:linear-gradient(145deg,#d8bd80,#244b6e 58%,#0c2032);
    display:flex;
    align-items:flex-end;
    padding:18px;
    color:#fff;
    position:relative;
    overflow:hidden
}

.gallery-tile::before{
    content:"PHOTO";
    position:absolute;
    top:15px;
    right:15px;
    font-size:9px;
    letter-spacing:.15em;
    color:rgba(255,255,255,.55)
}

.gallery-tile span{
    
    font-size:18px
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.video-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden
}

.video-thumb{
    height:190px;
    background:linear-gradient(135deg,#102c49,#547d9d);
    display:grid;
    place-items:center;
    font-size:35px;
    color:#fff
}

.video-card div:last-child{
    padding:18px;
    font-weight:700
}

.footerUIW{
color: #fff;
  padding: 20px 2vw;
  background: #fff;

    display:flow-root;
    justify-content:space-between;
    gap:30px;
    align-items:flex-end
}

.footerUIW h2{
    
    font-size:30px
}

.footerUIW p{
    font-size:12px;
    color:rgba(255,255,255,.55);
    max-width:620px;
    margin-top:8px;
}
.footerUIW .top{
    border: 1px solid rgb(19 19 19 / 70%);
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 11px;
    color: #181818;
    float: right;
}
.mobile-toggle{
    display:none
}
.reveal{
    opacity:0;
    transform:translateY(20px);
    transition:.6s ease
}
.reveal.visible{
    opacity:1;
    transform:none
}

@media(max-width:1200px){
 .site-shell{
    grid-template-columns:240px 1fr
}
 .pillar-grid{
    grid-template-columns:repeat(2,1fr)
}
 .collab-grid{
    grid-template-columns:repeat(2,1fr)
}
 .heroUIW-stat{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:30px
}
 .heroUIW{
    display:block;
    padding-bottom:55px
}
 .heroUIW-content{
    padding-top:130px;
}
}
@media(max-width:850px){


.heroUIW::after{

    content:"";
    position:absolute;
   width:520px;
    height:520px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    right:0px;
    top:-90px;
    box-shadow:0 0 0 70px rgba(255,255,255,.03),0 0 0 140px rgba(255,255,255,.02)
}

 .site-shell{
    display:block;
    padding: 0px 0vw;
}
 .sidebarUIW{
    position:fixed;
    left:-290px;
    width:290px;
    transition:.3s
}
 .sidebarUIW.open{
    left:0
}
 .mobile-toggle{
    display:grid;
    place-items:center;
    position:fixed;
    right: 10px;
    top: 160px;
    z-index:80;
    width:46px;
    height:46px;
    border:0;
    border-radius:14px;
    background:#0d1b2a;
    color:#fff;
    box-shadow:var(--shadow)
}

 .section{
    padding:90px 6vw
}

 .two-column{
    grid-template-columns:1fr;
    gap:35px
}

 .grid-2,.quote-grid,.video-grid{
    grid-template-columns:1fr
}

 .grid-3{
    grid-template-columns:1fr 1fr
}

 .event-card{
    grid-template-columns:1fr
}

 .event-visual{
    min-height:110px
}

 .gallery-grid{
    grid-template-columns:repeat(2,1fr)
}

 .footerUIW{
    flex-direction:column;
    align-items:flex-start;
}
}
@media(max-width:540px){

 .heroUIW h1{
    font-size:46px
}

 .heroUIW .lead{
    font-size:15px
}

 .heroUIW-stat{
    grid-template-columns:1fr
}

 .pillar-grid,.collab-grid,.grid-3{
    grid-template-columns:1fr
}

 .gallery-grid{
    grid-template-columns:1fr 1fr
}

 .conversation-card{
    grid-template-columns:1fr
}
}



/* =========================================================
   THREE CARDS IN ONE LINE
========================================================= */

.community-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}


/* ---------- CARD ---------- */

.community-card {
    background: #ffffff;
    border: 1px solid #e5e1d7;
    border-radius: 22px;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.community-card:hover {
    transform: translateY(-10px);
    border-color: #c9a45b;
    box-shadow: 0 25px 50px rgba(16, 34, 56, 0.13);
}


/* ---------- CARD IMAGE ---------- */

.card-image {
    position: relative;
    height: 235px;
    overflow: hidden;
    background: #183b5d;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.community-card:hover .card-image img {
    transform: scale(1.08);
}




/* ---------- CARD CONTENT ---------- */

.card-content {
    padding: 28px;
}

.card-content h4 {
    margin: 0 0 14px;
    color: #152840;
    font-size:20px;
    line-height: 1.25;
}

.card-content h3 {
    margin: 0 0 14px;
    color: #152840;
    font-size: 23px;
    line-height: 1.25;
}

.card-content p {
    margin: 0 0 20px;
    color:#0b0c0e;
    font-size: 14px;
    line-height: 1.75;
}


/* ---------- READ MORE ---------- */

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #102d4b;

    font-size: 12px;
    font-weight: 800;

    transition: 0.25s ease;
}

.read-more span {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1e5ca;
    color: #8b681f;

    transition: 0.25s ease;
}

.read-more:hover {
    color: #b48732;
}

.read-more:hover span {
    transform: translateX(5px);
    background: #b48732;
    color: white;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .community-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {




    .community-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-image {
        height: 240px;
    }

    .card-content h3 {
        min-height: auto;
    }

}




    .verse {
        margin: 0;
        color: #fff;
        font-size: 1.1rem;
        
    }


    .document-item {
        background: #ffffff;
        margin: 14px 0;
        padding: 20px 24px;
        border: 1px solid #e4ddd2;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,.04);
    }

    .document-item h3{
    font-size: 1.08rem;
    color: #333;
    margin: 0;
    margin-bottom: 10px;

    }


    .verse {
        font-size: 1.08rem;
      
        color: #555;
    }

.item26{
    margin: 42px 0 20px;
    padding: 14px 20px;
    border-left: 6px solid #030066;
    background: linear-gradient(90deg, #fff, #f8f4ee);
    color: #030066;
    font-size: 20px;


}


.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 14px;
    background: #f5f0e685;
    border-radius: 5px;
    border: 1px solid #d6bd87a6;
    margin-top: 10px;
}

.pdf-symbol {
    background: #007bff;
    color: #fff;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    width: 175px;
}

.pdf-link a {
    color: #007bff;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.pdf-link a:hover {
    text-decoration: underline;
}

.arrow {
    color: #b58a3a;
    font-weight: bold;
}