/* ==========================================================
   KINGDOM ALLIANCE COMMUNITY IMPACT
   ========================================================== */

.ci-page{
  --ci-gold:#c9963e;
  --ci-gold2:#e7ba5c;
  --ci-cream:#f7f1e7;
  --ci-cream2:#efe2cf;
  --ci-ink:#181715;
  --ci-muted:#625b52;
  --ci-line:#dfd2be;
}

.ci-page section{
  position:relative;
}

.ci-wrap{
  width:min(1180px,calc(100% - 44px));
  margin:auto;
}

.ci-eyebrow{
  color:#a87524;
  text-transform:uppercase;
  letter-spacing:.19em;
  font-weight:900;
  font-size:.76rem;
  margin-bottom:13px;
}

.ci-title{
  font:700 clamp(2.6rem,5vw,5.2rem)/.98 Georgia,serif;
  letter-spacing:-.04em;
  text-wrap:balance;
  margin:0;
}

.ci-copy{
  color:var(--ci-muted);
  font-size:1.06rem;
  line-height:1.75;
}

.ci-copy.large{
  font-size:1.16rem;
}

.ci-center{
  text-align:center;
}

.ci-center .ci-copy{
  max-width:850px;
  margin-left:auto;
  margin-right:auto;
}

/* HERO */

.ci-hero{
  min-height:690px;
  display:grid;
  align-items:end;
  overflow:hidden;
  color:white;
  background:
    linear-gradient(
      90deg,
      rgba(11,11,10,.94) 0%,
      rgba(11,11,10,.79) 36%,
      rgba(11,11,10,.20) 72%,
      rgba(11,11,10,.05) 100%
    ),
    var(--hero-image) center/cover no-repeat;
}

.ci-hero .ci-wrap{
  padding:105px 0 92px;
}

.ci-hero-copy{
  width:min(660px,100%);
}

.ci-hero .ci-eyebrow{
  color:#efc76f;
}

.ci-hero h1{
  font:700 clamp(3.4rem,6vw,6.3rem)/.91 Georgia,serif;
  letter-spacing:-.05em;
  margin:0 0 20px;
  text-wrap:balance;
}

.ci-hero p{
  color:#f2ede5;
  font-size:1.12rem;
  max-width:620px;
}

.ci-tagline{
  font:700 1.32rem Georgia,serif;
  color:#efc76f;
  margin:25px 0 0;
}

.ci-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.ci-btn{
  min-height:52px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-weight:900;
  border:1px solid transparent;
}

.ci-btn-gold{
  background:linear-gradient(135deg,#efc76f,#c9963e);
  color:#171614;
}

.ci-btn-outline{
  color:white;
  border-color:rgba(255,255,255,.35);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
}

/* INTRO */

.ci-intro{
  padding:100px 0;
  background:#fffdf9;
}

.ci-intro .ci-title{
  max-width:960px;
  margin:0 auto 22px;
}

/* TWO WAYS */

.ci-two-ways{
  padding:95px 0;
  background:#f5eee3;
}

.ci-two-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:44px;
}

.ci-service-card{
  border-radius:28px;
  padding:42px;
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}

.ci-service-card.ministry{
  color:white;
  background:
    linear-gradient(rgba(16,16,15,.62),rgba(16,16,15,.83)),
    url('https://images.unsplash.com/photo-1507692049790-de58290a4334?auto=format&fit=crop&w=1400&q=86')
    center/cover no-repeat;
}

.ci-service-card.impact{
  color:white;
  background:
    linear-gradient(rgba(16,16,15,.35),rgba(16,16,15,.82)),
    url('https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?auto=format&fit=crop&w=1400&q=86')
    center/cover no-repeat;
}

.ci-service-card h3{
  font:700 2.25rem Georgia,serif;
  margin:0 0 10px;
}

.ci-service-card p{
  color:#eee7de;
  margin:0;
}

/* PILLARS */

.ci-pillars{
  padding:110px 0;
  background:#fffdf9;
}

.ci-pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:50px;
}

.ci-pillar{
  min-height:430px;
  border-radius:26px;
  overflow:hidden;
  position:relative;
  color:white;
  display:flex;
  align-items:flex-end;
  box-shadow:0 18px 48px rgba(30,25,18,.10);
}

.ci-pillar::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(12,12,11,.94) 0%,
    rgba(12,12,11,.51) 48%,
    rgba(12,12,11,.08) 78%
  );
}

.ci-pillar-content{
  position:relative;
  z-index:2;
  padding:28px;
}

.ci-pillar .ci-number{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#e7ba5c;
  color:#171614;
  display:grid;
  place-items:center;
  font-weight:900;
  margin-bottom:16px;
}

.ci-pillar h3{
  font:700 1.65rem Georgia,serif;
  margin:0 0 8px;
}

.ci-pillar p{
  color:#eae3da;
  margin:0 0 15px;
}

.ci-pillar a{
  color:#efc76f;
  font-weight:900;
}

/* pillar photos */

.ci-strong{
  background:
    url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1100&q=86')
    center/cover no-repeat;
}

.ci-essentials{
  background:
    url('https://images.unsplash.com/photo-1593113598332-cd288d649433?auto=format&fit=crop&w=1100&q=86')
    center/cover no-repeat;
}

.ci-giving{
  background:
    url('https://images.unsplash.com/photo-1549465220-1a8b9238cd48?auto=format&fit=crop&w=1100&q=86')
    center/cover no-repeat;
}

.ci-opportunity{
  background:
    url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1100&q=86')
    center/cover no-repeat;
}

.ci-youth{
  background:
    url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1100&q=86')
    center/cover no-repeat;
}

.ci-navigation{
  background:
    url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1100&q=86')
    center/cover no-repeat;
}

/* FEATURE */

.ci-feature{
  padding:105px 0;
  background:#f5eee3;
}

.ci-feature:nth-of-type(even){
  background:#fffdf9;
}

.ci-feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:76px;
  align-items:center;
}

.ci-feature.reverse .ci-feature-image{
  order:2;
}

.ci-feature-image{
  border-radius:30px;
  overflow:hidden;
  min-height:500px;
  box-shadow:0 28px 70px rgba(30,25,18,.13);
}

.ci-feature-image img{
  width:100%;
  height:100%;
  min-height:500px;
  object-fit:cover;
}

.ci-feature h2{
  font:700 clamp(2.7rem,4vw,4.4rem)/1 Georgia,serif;
  letter-spacing:-.035em;
  margin:9px 0 20px;
}

.ci-feature-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
  margin-top:25px;
}

.ci-chip{
  padding:13px 15px;
  border-radius:13px;
  background:#fffdf9;
  border:1px solid var(--ci-line);
  color:#29251f;
  font-weight:800;
  font-size:.92rem;
}

/* STRONG FAMILIES SUBCARDS */

.ci-family-tracks{
  padding:105px 0;
  background:#fffdf9;
}

.ci-track-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:48px;
}

.ci-track{
  padding:32px;
  border:1px solid var(--ci-line);
  border-radius:24px;
  background:white;
  box-shadow:0 14px 38px rgba(25,21,17,.055);
}

.ci-track h3{
  font:700 1.6rem Georgia,serif;
  margin:0 0 10px;
}

.ci-track p{
  color:var(--ci-muted);
  margin:0;
}

/* STATEMENT BAND */

.ci-statement{
  padding:115px 0;
  color:white;
  text-align:center;
  background:
    linear-gradient(rgba(15,15,14,.81),rgba(15,15,14,.84)),
    url('https://images.unsplash.com/photo-1472653431158-6364773b2a56?auto=format&fit=crop&w=1800&q=86')
    center/cover fixed;
}

.ci-statement h2{
  font:700 clamp(3rem,5vw,5rem)/1 Georgia,serif;
  max-width:1050px;
  margin:0 auto 22px;
}

.ci-statement p{
  max-width:840px;
  margin:auto;
  color:#e6ded3;
  font-size:1.12rem;
}

/* DIGNITY */

.ci-dignity{
  padding:110px 0;
  background:#fffdf9;
}

.ci-dignity-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:center;
}

.ci-dignity-photo{
  border-radius:26px;
  min-height:480px;
  background:
    url('https://images.unsplash.com/photo-1594708767771-a7502209ff51?auto=format&fit=crop&w=1100&q=86')
    center/cover no-repeat;
}

.ci-quote{
  font:700 clamp(2.3rem,4vw,4rem)/1.08 Georgia,serif;
  letter-spacing:-.025em;
  margin:0;
}

/* ACTIONS */

.ci-actions-section{
  padding:105px 0;
  background:#f0e4d2;
}

.ci-action-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:48px;
}

.ci-action-card{
  padding:30px;
  background:#fffdf9;
  border:1px solid #dccfb9;
  border-radius:22px;
}

.ci-action-icon{
  width:50px;
  height:50px;
  border-radius:15px;
  background:#f0ddb9;
  display:grid;
  place-items:center;
  font-size:22px;
  margin-bottom:20px;
}

.ci-action-card h3{
  font:700 1.5rem Georgia,serif;
  margin:0 0 9px;
}

.ci-action-card p{
  color:#625b52;
}

.ci-action-card a{
  color:#8d611b;
  font-weight:900;
}

/* CHRISTIAN IDENTITY */

.ci-faith{
  padding:90px 0;
  background:#1a1917;
  color:white;
}

.ci-faith .ci-title{
  font-size:clamp(2.3rem,3.5vw,3.8rem);
}

.ci-faith p{
  color:#d7cfc4;
  max-width:900px;
}

.ci-faith strong{
  color:#efc76f;
}

/* SUBPAGE HERO */

.ci-subhero{
  padding:110px 0;
  min-height:560px;
  display:grid;
  align-items:end;
  color:white;
  background:
    linear-gradient(
      90deg,
      rgba(14,14,13,.92),
      rgba(14,14,13,.57) 58%,
      rgba(14,14,13,.16)
    ),
    var(--hero-image) center/cover no-repeat;
}

.ci-subhero h1{
  font:700 clamp(3.5rem,6vw,6.2rem)/.93 Georgia,serif;
  max-width:860px;
  margin:10px 0 20px;
}

.ci-subhero p{
  max-width:710px;
  color:#eee6dc;
  font-size:1.12rem;
}

/* SUBPAGE CONTENT */

.ci-program{
  padding:105px 0;
}

.ci-program:nth-of-type(even){
  background:#f7f1e7;
}

.ci-program:nth-of-type(odd){
  background:#fffdf9;
}

.ci-program-intro{
  max-width:900px;
  margin:0 auto 48px;
  text-align:center;
}

.ci-program-intro h2{
  font:700 clamp(2.6rem,4vw,4.25rem)/1 Georgia,serif;
  margin:8px 0 18px;
}

.ci-program-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.ci-program-card{
  padding:30px;
  border-radius:22px;
  background:white;
  border:1px solid var(--ci-line);
}

.ci-program-card h3{
  font:700 1.45rem Georgia,serif;
  margin:0 0 9px;
}

.ci-program-card p{
  color:var(--ci-muted);
  margin:0;
}

.ci-big-cta{
  padding:95px 0;
  text-align:center;
  color:white;
  background:linear-gradient(135deg,#181715,#30291f);
}

.ci-big-cta h2{
  font:700 clamp(2.8rem,4vw,4.6rem)/1 Georgia,serif;
  max-width:900px;
  margin:0 auto 20px;
}

.ci-big-cta p{
  max-width:760px;
  margin:0 auto;
  color:#ddd5cb;
}

.ci-big-cta .ci-actions{
  justify-content:center;
}

/* DARK MODE */

html[data-theme="dark"] .ci-intro,
html[data-theme="dark"] .ci-pillars,
html[data-theme="dark"] .ci-family-tracks,
html[data-theme="dark"] .ci-dignity,
html[data-theme="dark"] .ci-feature,
html[data-theme="dark"] .ci-program{
  background:#171715;
}

html[data-theme="dark"] .ci-two-ways,
html[data-theme="dark"] .ci-actions-section,
html[data-theme="dark"] .ci-feature:nth-of-type(even),
html[data-theme="dark"] .ci-program:nth-of-type(even){
  background:#211f1b;
}

html[data-theme="dark"] .ci-title,
html[data-theme="dark"] .ci-feature h2,
html[data-theme="dark"] .ci-program-intro h2,
html[data-theme="dark"] .ci-quote{
  color:#f8f5ef;
}

html[data-theme="dark"] .ci-copy,
html[data-theme="dark"] .ci-feature p,
html[data-theme="dark"] .ci-track p,
html[data-theme="dark"] .ci-program-card p{
  color:#c9c1b6;
}

html[data-theme="dark"] .ci-track,
html[data-theme="dark"] .ci-program-card,
html[data-theme="dark"] .ci-action-card,
html[data-theme="dark"] .ci-chip{
  background:#24211d;
  color:#f5f0e8;
  border-color:#40382e;
}

/* MOBILE */

@media(max-width:980px){

  .ci-hero{
    min-height:650px;
    background:
      linear-gradient(
        to top,
        rgba(10,10,9,.95),
        rgba(10,10,9,.54) 66%,
        rgba(10,10,9,.20)
      ),
      var(--hero-image) 62% center/cover no-repeat;
  }

  .ci-hero .ci-wrap{
    padding:150px 0 65px;
  }

  .ci-two-grid,
  .ci-pillar-grid,
  .ci-feature-grid,
  .ci-track-grid,
  .ci-dignity-grid,
  .ci-action-grid,
  .ci-program-grid{
    grid-template-columns:1fr;
  }

  .ci-pillar{
    min-height:390px;
  }

  .ci-feature.reverse .ci-feature-image{
    order:initial;
  }

  .ci-feature-image,
  .ci-feature-image img{
    min-height:360px;
  }

  .ci-feature-list{
    grid-template-columns:1fr;
  }

  .ci-service-card{
    min-height:360px;
  }

  .ci-statement{
    background-attachment:scroll;
  }

  .ci-dignity-photo{
    min-height:380px;
  }

  .ci-action-grid{
    gap:12px;
  }

}


/* =========================================================
   COMMUNITY IMPACT V2
   FOUNDATION / HERO FALLBACK
   ========================================================= */

.ci-hero{
  background-color:#171614 !important;
}

.ci-subhero{
  background-color:#171614 !important;
}

.ci-hero .ci-wrap,
.ci-subhero .ci-wrap{
  position:relative;
  z-index:2;
}

.ci-hero h1,
.ci-subhero h1{
  color:#ffffff !important;
}

.ci-hero p,
.ci-subhero p{
  color:#eee7de !important;
}


/* make Community Impact nav fit comfortably */

@media(min-width:981px){

  .ci-page .nav{
    width:min(1320px,calc(100% - 40px));
  }

  .ci-page .links{
    gap:15px;
    font-size:.84rem;
  }

  .ci-page .links .btn{
    min-height:46px;
    padding:0 16px;
  }

}


/* Light mode content readability */

html:not([data-theme="dark"]) .ci-page .ci-copy{
  color:#5d574f !important;
}

html:not([data-theme="dark"]) .ci-page .ci-title{
  color:#181715 !important;
}


/* Hero always remains dark in both site modes */

html:not([data-theme="dark"]) .ci-page .ci-hero,
html:not([data-theme="dark"]) .ci-page .ci-subhero{
  color:white !important;
}

html:not([data-theme="dark"]) .ci-page .ci-hero h1,
html:not([data-theme="dark"]) .ci-page .ci-subhero h1{
  color:white !important;
}

html:not([data-theme="dark"]) .ci-page .ci-hero p,
html:not([data-theme="dark"]) .ci-page .ci-subhero p{
  color:#f0e9df !important;
}



/* =========================================================
   COMMUNITY IMPACT V3
   APPROVED MOCKUP MATCH
   ========================================================= */


/* ---------------------------------------------------------
   TRANSPARENT HEADER OVER HERO
   COMMUNITY IMPACT LANDING PAGE ONLY
   --------------------------------------------------------- */

.ci-page:has(.ci-mockup-hero) header{
  position:absolute !important;
  top:0;
  left:0;
  right:0;

  background:
    linear-gradient(
      180deg,
      rgba(9,9,8,.74),
      rgba(9,9,8,.24),
      transparent
    ) !important;

  border-bottom:0 !important;
  box-shadow:none !important;

  z-index:100;
}

.ci-page:has(.ci-mockup-hero) header .brand,
.ci-page:has(.ci-mockup-hero) header .brand strong,
.ci-page:has(.ci-mockup-hero) header .links a{
  color:#ffffff !important;
}

.ci-page:has(.ci-mockup-hero) header .brand small{
  color:#e0dbd3 !important;
}

.ci-page:has(.ci-mockup-hero) header .links a.current{
  color:#efc76f !important;
}

.ci-page:has(.ci-mockup-hero) .kam-theme-switch{
  background:rgba(25,23,20,.58) !important;
  color:#efc76f !important;
  border-color:rgba(239,199,111,.30) !important;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.ci-mockup-hero{
  position:relative;

  height:670px;
  min-height:670px;

  padding:0 !important;

  display:flex;
  align-items:center;

  overflow:hidden;

  color:white;

  background:
    url('/assets/community-impact/hero-community.jpg')
    center 43% / cover no-repeat;
}

.ci-mockup-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(8,8,7,.97) 0%,
      rgba(8,8,7,.89) 26%,
      rgba(8,8,7,.55) 48%,
      rgba(8,8,7,.16) 71%,
      rgba(8,8,7,.03) 100%
    );
}

.ci-mockup-inner{
  position:relative;
  z-index:2;

  width:min(1480px,calc(100% - 110px));

  margin:auto;

  padding-top:80px;
}

.ci-mockup-copy{
  width:610px;
  max-width:47%;
}

.ci-mockup-copy h1{
  margin:0 0 14px;

  font-family:Georgia,serif;
  font-weight:700;

  letter-spacing:-.055em;
  line-height:.78;

  text-transform:uppercase;
}

.ci-mockup-copy h1 span,
.ci-mockup-copy h1 strong{
  display:block;
}

.ci-mockup-copy h1 span{
  color:#f7f3ec;

  font-size:
    clamp(4.4rem,6.3vw,7.35rem);
}

.ci-mockup-copy h1 strong{
  color:#d9aa51;

  font-size:
    clamp(4.4rem,6.3vw,7.35rem);

  font-weight:700;
}

.ci-mockup-tagline{
  margin-top:28px;

  color:#ffffff;

  font-size:.98rem;

  line-height:1.55;

  letter-spacing:.28em;

  font-weight:700;
}

.ci-gold-rule{
  width:55px;
  height:3px;

  background:#dfae54;

  margin:24px 0 23px;
}

.ci-mockup-copy p{
  width:520px;
  max-width:100%;

  margin:0;

  color:#f4efe8 !important;

  font-size:1rem;
  line-height:1.48;

  font-weight:500;
}

.ci-mockup-actions{
  display:flex;
  flex-wrap:wrap;

  gap:16px;

  margin-top:25px;
}

.ci-mockup-btn{
  height:46px;

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

  padding:0 27px;

  border-radius:26px;

  border:
    1.5px solid #d9aa51;

  color:#ffffff;

  background:
    rgba(11,11,10,.42);

  font-size:.82rem;

  font-weight:900;

  letter-spacing:.04em;
}

.ci-mockup-btn.primary{
  background:
    linear-gradient(
      135deg,
      #efc76f,
      #c9963e
    );

  color:#151410;

  border-color:transparent;
}


/* ---------------------------------------------------------
   SIX PILLAR PHOTO STRIP
   --------------------------------------------------------- */

.ci-mockup-pillars{
  display:grid;

  grid-template-columns:
    repeat(6,1fr);

  min-height:245px;

  padding:0 !important;

  border-top:
    1px solid rgba(231,186,92,.65);

  background:#111;
}

.ci-mockup-pillar{
  position:relative;

  min-height:245px;

  overflow:hidden;

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

  background-position:center;
  background-size:cover;

  border-right:
    1px solid rgba(231,186,92,.55);
}

.ci-mockup-pillar:last-child{
  border-right:0;
}

.ci-mockup-pillar-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(6,6,5,.97) 0%,
      rgba(6,6,5,.71) 43%,
      rgba(6,6,5,.12) 82%
    );

  transition:background .25s ease;
}

.ci-mockup-pillar:hover
.ci-mockup-pillar-shade{
  background:
    linear-gradient(
      to top,
      rgba(6,6,5,.94) 0%,
      rgba(104,74,25,.55) 50%,
      rgba(6,6,5,.08) 85%
    );
}

.ci-mockup-pillar-content{
  position:relative;
  z-index:2;

  padding:0 18px 30px;

  text-align:center;

  color:white;
}

.ci-mockup-icon{
  color:#e6b858;

  font-size:2rem;
  line-height:1;

  margin-bottom:11px;
}

.ci-mockup-pillar span{
  font-size:.92rem;

  line-height:1.28;

  font-weight:800;

  letter-spacing:.12em;
}


/* ---------------------------------------------------------
   PREVENT OLD HERO STYLES INTERFERING
   --------------------------------------------------------- */

.ci-page .ci-mockup-hero h1{
  color:inherit !important;
}

html:not([data-theme="dark"])
.ci-page .ci-mockup-hero{
  color:white !important;
}

html[data-theme="dark"]
.ci-page .ci-mockup-hero{
  color:white !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:980px){

  .ci-page:has(.ci-mockup-hero) header{
    position:absolute !important;
  }

  .ci-mockup-hero{
    height:auto;
    min-height:720px;

    align-items:flex-end;

    background-position:62% center;
  }

  .ci-mockup-overlay{
    background:
      linear-gradient(
        to top,
        rgba(7,7,6,.98) 0%,
        rgba(7,7,6,.84) 43%,
        rgba(7,7,6,.27) 78%,
        rgba(7,7,6,.15) 100%
      );
  }

  .ci-mockup-inner{
    width:min(100% - 36px,650px);

    padding:
      160px 0 55px;
  }

  .ci-mockup-copy{
    width:100%;
    max-width:100%;
  }

  .ci-mockup-copy h1 span,
  .ci-mockup-copy h1 strong{
    font-size:
      clamp(3.3rem,14vw,5rem);
  }

  .ci-mockup-tagline{
    font-size:.84rem;
    letter-spacing:.18em;
  }

  .ci-mockup-actions{
    gap:9px;
  }

  .ci-mockup-btn{
    height:44px;
    padding:0 18px;
  }

  .ci-mockup-pillars{
    grid-template-columns:
      repeat(2,1fr);
  }

  .ci-mockup-pillar{
    min-height:220px;
  }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media(max-width:560px){

  .ci-mockup-pillars{
    grid-template-columns:1fr;
  }

  .ci-mockup-pillar{
    min-height:210px;
  }

}


/* =========================================================
   COMMUNITY IMPACT V6
   FINAL DIRECT-CDN VISUAL PASS
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.ci-mockup-hero{
  height:645px !important;
  min-height:645px !important;

  background:
    url('/assets/community-impact/hero-community-v6.jpg')
    62% center / cover no-repeat !important;
}

.ci-mockup-overlay{
  background:
    linear-gradient(
      90deg,
      rgba(6,6,5,.99) 0%,
      rgba(6,6,5,.95) 23%,
      rgba(6,6,5,.75) 41%,
      rgba(6,6,5,.36) 60%,
      rgba(6,6,5,.13) 77%,
      rgba(6,6,5,.03) 100%
    ) !important;
}

.ci-mockup-inner{
  width:min(1460px,calc(100% - 92px)) !important;
}

.ci-mockup-copy{
  width:590px !important;
  max-width:44% !important;
}

.ci-mockup-copy h1{
  margin-bottom:22px !important;
}

.ci-mockup-copy h1 span,
.ci-mockup-copy h1 strong{
  font-size:
    clamp(4rem,5.6vw,6.45rem) !important;
}

.ci-mockup-copy h1{
  line-height:.82 !important;
}


/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.ci-mockup-tagline{
  color:#fff !important;

  font-size:.91rem !important;

  line-height:1.6 !important;

  letter-spacing:.24em !important;
}

.ci-mockup-copy p{
  color:#f6f2eb !important;
}


/* ---------------------------------------------------------
   PROGRAM TILE STRIP
   --------------------------------------------------------- */

.ci-mockup-pillars{
  min-height:238px !important;
}

.ci-mockup-pillar{
  min-height:238px !important;
}

.ci-mockup-pillar-shade{
  background:
    linear-gradient(
      to top,
      rgba(4,4,4,.99) 0%,
      rgba(4,4,4,.81) 43%,
      rgba(4,4,4,.34) 72%,
      rgba(4,4,4,.07) 100%
    ) !important;
}

.ci-mockup-pillar span{
  color:#fff !important;
}

.ci-mockup-icon{
  color:#efc76f !important;
}


/* ---------------------------------------------------------
   MAIN SIX PILLAR GRID
   --------------------------------------------------------- */

.ci-strong{
  background:
    url('/assets/community-impact/strong-families-v6.jpg')
    center / cover no-repeat !important;
}

.ci-essentials{
  background:
    url('/assets/community-impact/community-essentials-v6.jpg')
    center / cover no-repeat !important;
}

.ci-giving{
  background:
    url('/assets/community-impact/season-giving-v6.jpg')
    center / cover no-repeat !important;
}

.ci-opportunity{
  background:
    url('/assets/community-impact/community-opportunity-v6.jpg')
    center / cover no-repeat !important;
}

.ci-youth{
  background:
    url('/assets/community-impact/youth-future-ready-v6.jpg')
    center / cover no-repeat !important;
}

.ci-navigation{
  background:
    url('/assets/community-impact/resource-navigation-v6.jpg')
    center / cover no-repeat !important;
}


/* ---------------------------------------------------------
   PILLAR TEXT CONTRAST
   --------------------------------------------------------- */

.ci-pillar::before{
  background:
    linear-gradient(
      to top,
      rgba(5,5,5,.99) 0%,
      rgba(5,5,5,.91) 34%,
      rgba(5,5,5,.62) 58%,
      rgba(5,5,5,.18) 87%
    ) !important;
}

.ci-pillar h3{
  color:#ffffff !important;
}

.ci-pillar p{
  color:#f4efe7 !important;
}

.ci-pillar a{
  color:#efc76f !important;
}

.ci-pillar-content{
  text-shadow:
    0 2px 9px rgba(0,0,0,.65);
}


/* ---------------------------------------------------------
   TWO WAYS WE SERVE
   --------------------------------------------------------- */

.ci-service-card.ministry{
  background:
    linear-gradient(
      to top,
      rgba(5,5,5,.97),
      rgba(5,5,5,.52)
    ),
    url('/assets/community-impact/strong-families-v6.jpg')
    center / cover no-repeat !important;
}

.ci-service-card.impact{
  background:
    linear-gradient(
      to top,
      rgba(5,5,5,.97),
      rgba(5,5,5,.52)
    ),
    url('/assets/community-impact/community-essentials-v6.jpg')
    center / cover no-repeat !important;
}

.ci-service-card h3{
  color:#fff !important;
}

.ci-service-card p{
  color:#f1ebe3 !important;
}


/* ---------------------------------------------------------
   FEATURE IMAGES
   --------------------------------------------------------- */

.ci-feature-image img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  filter:none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:980px){

  .ci-mockup-hero{
    height:auto !important;
    min-height:690px !important;

    background-position:67% center !important;
  }

  .ci-mockup-copy{
    width:100% !important;
    max-width:100% !important;
  }

  .ci-mockup-overlay{
    background:
      linear-gradient(
        to top,
        rgba(6,6,5,.99) 0%,
        rgba(6,6,5,.91) 45%,
        rgba(6,6,5,.47) 76%,
        rgba(6,6,5,.14) 100%
      ) !important;
  }

}


/* =========================================================
   END V6
   ========================================================= */


/* =========================================================
   COMMUNITY IMPACT V7
   LIGHT-FIRST SUBPAGE HEROES
   ========================================================= */


/* ---------------------------------------------------------
   LIGHT MODE SUBPAGE HERO
   --------------------------------------------------------- */

html:not([data-theme="dark"]) .ci-subhero{
  min-height:560px !important;

  color:#171614 !important;

  display:grid !important;
  align-items:center !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,253,249,1) 0%,
      rgba(255,253,249,.98) 32%,
      rgba(255,253,249,.88) 48%,
      rgba(255,253,249,.35) 67%,
      rgba(255,253,249,.08) 100%
    ),
    var(--hero-image) 78% center / cover no-repeat !important;
}

html:not([data-theme="dark"]) .ci-subhero .ci-wrap{
  width:min(1180px,calc(100% - 44px)) !important;
}

html:not([data-theme="dark"]) .ci-subhero .ci-eyebrow{
  color:#a87524 !important;
}

html:not([data-theme="dark"]) .ci-subhero h1{
  max-width:690px !important;

  color:#171614 !important;

  font-size:
    clamp(3.3rem,5.4vw,5.8rem) !important;

  line-height:.94 !important;

  text-shadow:none !important;
}

html:not([data-theme="dark"]) .ci-subhero p{
  max-width:700px !important;

  color:#5b554d !important;

  font-size:1.08rem !important;
}


/* ---------------------------------------------------------
   LIGHT MODE BUTTONS
   --------------------------------------------------------- */

html:not([data-theme="dark"])
.ci-subhero .ci-btn-outline{
  color:#171614 !important;

  border-color:#bfa47a !important;

  background:
    rgba(255,255,255,.72) !important;
}


/* ---------------------------------------------------------
   DARK MODE SUBPAGE HERO
   Keep dark version available.
   --------------------------------------------------------- */

html[data-theme="dark"] .ci-subhero{
  min-height:560px !important;

  color:white !important;

  background:
    linear-gradient(
      90deg,
      rgba(10,10,9,.97) 0%,
      rgba(10,10,9,.90) 34%,
      rgba(10,10,9,.62) 54%,
      rgba(10,10,9,.22) 73%,
      rgba(10,10,9,.05) 100%
    ),
    var(--hero-image) 76% center / cover no-repeat !important;
}

html[data-theme="dark"] .ci-subhero h1{
  color:#ffffff !important;
}

html[data-theme="dark"] .ci-subhero p{
  color:#eee7de !important;
}

html[data-theme="dark"] .ci-subhero .ci-eyebrow{
  color:#efc76f !important;
}


/* ---------------------------------------------------------
   SUBPAGE BODY LIGHT MODE
   --------------------------------------------------------- */

html:not([data-theme="dark"]) .ci-program{
  background:#fffdf9 !important;
}

html:not([data-theme="dark"])
.ci-program:nth-of-type(even){
  background:#f6f0e5 !important;
}

html:not([data-theme="dark"]) .ci-program h2,
html:not([data-theme="dark"]) .ci-program h3{
  color:#181715 !important;
}

html:not([data-theme="dark"]) .ci-program p{
  color:#5e584f !important;
}

html:not([data-theme="dark"])
.ci-program-card{
  background:#ffffff !important;

  border-color:#ddd0bb !important;

  box-shadow:
    0 12px 32px rgba(28,23,17,.055) !important;
}


/* ---------------------------------------------------------
   SUBPAGE FINAL CTA
   --------------------------------------------------------- */

html:not([data-theme="dark"]) .ci-big-cta{
  background:
    linear-gradient(
      135deg,
      #f1e5d2,
      #fff9ef
    ) !important;

  color:#171614 !important;
}

html:not([data-theme="dark"])
.ci-big-cta h2{
  color:#171614 !important;
}

html:not([data-theme="dark"])
.ci-big-cta p{
  color:#5d574f !important;
}

html:not([data-theme="dark"])
.ci-big-cta .ci-btn-outline{
  color:#171614 !important;

  border-color:#bfa47a !important;

  background:#fffdf9 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:980px){

  html:not([data-theme="dark"]) .ci-subhero{
    min-height:690px !important;

    align-items:end !important;

    background:
      linear-gradient(
        to top,
        rgba(255,253,249,1) 0%,
        rgba(255,253,249,.96) 42%,
        rgba(255,253,249,.66) 65%,
        rgba(255,253,249,.16) 100%
      ),
      var(--hero-image) center 30% / cover no-repeat !important;
  }

  html:not([data-theme="dark"]) .ci-subhero .ci-wrap{
    padding-top:290px !important;
    padding-bottom:55px !important;
  }

  html:not([data-theme="dark"]) .ci-subhero h1{
    font-size:
      clamp(2.8rem,11vw,4.4rem) !important;
  }

}


/* =========================================================
   END V7
   ========================================================= */


/* =========================================================
   COMMUNITY IMPACT V8
   CINEMATIC PHOTO HERO + LIGHT BODY
   ========================================================= */


/* ---------------------------------------------------------
   BASE SUBPAGE HERO
   --------------------------------------------------------- */

.ci-subhero{
  position:relative !important;

  min-height:620px !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;

  color:white !important;

  background:
    linear-gradient(
      90deg,
      rgba(6,6,5,.96) 0%,
      rgba(6,6,5,.91) 26%,
      rgba(6,6,5,.72) 43%,
      rgba(6,6,5,.34) 61%,
      rgba(6,6,5,.12) 76%,
      rgba(6,6,5,.02) 100%
    ),
    var(--hero-image) 72% center / cover no-repeat !important;
}

.ci-subhero .ci-wrap{
  position:relative !important;
  z-index:2 !important;

  width:min(1180px,calc(100% - 48px)) !important;
}


/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.ci-subhero .ci-eyebrow{
  color:#efc76f !important;

  text-shadow:
    0 2px 10px rgba(0,0,0,.35);
}

.ci-subhero h1{
  max-width:700px !important;

  color:#ffffff !important;

  font-size:
    clamp(3.4rem,5.5vw,5.9rem) !important;

  line-height:.93 !important;

  letter-spacing:-.045em !important;

  text-shadow:
    0 3px 18px rgba(0,0,0,.24) !important;
}

.ci-subhero p{
  max-width:690px !important;

  color:#f1ebe4 !important;

  font-size:1.08rem !important;
  line-height:1.65 !important;

  text-shadow:
    0 2px 12px rgba(0,0,0,.26);
}


/* ---------------------------------------------------------
   HERO BUTTONS
   --------------------------------------------------------- */

.ci-subhero .ci-btn-gold{
  background:
    linear-gradient(
      135deg,
      #efc76f,
      #c9963e
    ) !important;

  color:#171614 !important;

  border-color:transparent !important;
}

.ci-subhero .ci-btn-outline{
  color:#ffffff !important;

  border-color:
    rgba(255,255,255,.55) !important;

  background:
    rgba(15,15,14,.34) !important;

  backdrop-filter:
    blur(8px);
}


/* ---------------------------------------------------------
   LIGHT MODE
   IMPORTANT:
   HERO STAYS DARK/PHOTOGRAPHIC.
   BODY BELOW STAYS LIGHT.
   --------------------------------------------------------- */

html:not([data-theme="dark"]) .ci-subhero{
  color:white !important;

  background:
    linear-gradient(
      90deg,
      rgba(6,6,5,.96) 0%,
      rgba(6,6,5,.90) 27%,
      rgba(6,6,5,.70) 44%,
      rgba(6,6,5,.31) 62%,
      rgba(6,6,5,.09) 78%,
      rgba(6,6,5,.01) 100%
    ),
    var(--hero-image) 72% center / cover no-repeat !important;
}

html:not([data-theme="dark"]) .ci-subhero h1{
  color:#ffffff !important;
}

html:not([data-theme="dark"]) .ci-subhero p{
  color:#f1ebe4 !important;
}

html:not([data-theme="dark"]) .ci-subhero .ci-eyebrow{
  color:#efc76f !important;
}


/* ---------------------------------------------------------
   DARK MODE
   Slightly deeper treatment.
   --------------------------------------------------------- */

html[data-theme="dark"] .ci-subhero{
  background:
    linear-gradient(
      90deg,
      rgba(4,4,4,.98) 0%,
      rgba(4,4,4,.94) 29%,
      rgba(4,4,4,.76) 48%,
      rgba(4,4,4,.37) 66%,
      rgba(4,4,4,.13) 80%,
      rgba(4,4,4,.03) 100%
    ),
    var(--hero-image) 72% center / cover no-repeat !important;
}


/* ---------------------------------------------------------
   LIGHT BODY SECTIONS
   --------------------------------------------------------- */

html:not([data-theme="dark"]) .ci-program{
  background:#fffdf9 !important;
}

html:not([data-theme="dark"])
.ci-program:nth-of-type(even){
  background:#f6f0e5 !important;
}

html:not([data-theme="dark"])
.ci-program-intro h2,
html:not([data-theme="dark"])
.ci-program-card h3{
  color:#181715 !important;
}

html:not([data-theme="dark"])
.ci-program-intro p,
html:not([data-theme="dark"])
.ci-program-card p{
  color:#5d574f !important;
}

html:not([data-theme="dark"])
.ci-program-card{
  background:#ffffff !important;

  border-color:#ddcfba !important;

  box-shadow:
    0 12px 32px rgba(28,23,17,.06) !important;
}


/* ---------------------------------------------------------
   FINAL CTA
   Keep the bottom light in light mode.
   --------------------------------------------------------- */

html:not([data-theme="dark"]) .ci-big-cta{
  background:
    linear-gradient(
      135deg,
      #f0e4d2,
      #fff9ef
    ) !important;

  color:#171614 !important;
}

html:not([data-theme="dark"])
.ci-big-cta h2{
  color:#171614 !important;
}

html:not([data-theme="dark"])
.ci-big-cta p{
  color:#5d574f !important;
}

html:not([data-theme="dark"])
.ci-big-cta .ci-btn-outline{
  color:#171614 !important;

  border-color:#c8af88 !important;

  background:#fffdf9 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:980px){

  .ci-subhero{
    min-height:680px !important;

    align-items:flex-end !important;

    background:
      linear-gradient(
        to top,
        rgba(6,6,5,.98) 0%,
        rgba(6,6,5,.91) 39%,
        rgba(6,6,5,.55) 62%,
        rgba(6,6,5,.20) 82%,
        rgba(6,6,5,.08) 100%
      ),
      var(--hero-image) center 30% / cover no-repeat !important;
  }

  html:not([data-theme="dark"]) .ci-subhero{
    background:
      linear-gradient(
        to top,
        rgba(6,6,5,.98) 0%,
        rgba(6,6,5,.90) 40%,
        rgba(6,6,5,.53) 63%,
        rgba(6,6,5,.18) 83%,
        rgba(6,6,5,.06) 100%
      ),
      var(--hero-image) center 30% / cover no-repeat !important;
  }

  .ci-subhero .ci-wrap{
    padding-top:290px !important;
    padding-bottom:55px !important;
  }

  .ci-subhero h1{
    font-size:
      clamp(2.8rem,11vw,4.5rem) !important;
  }

  .ci-subhero p{
    font-size:1rem !important;
  }

}


/* =========================================================
   END V8
   ========================================================= */


/* =========================================================
   COMMUNITY IMPACT V9
   MODERN FAMILY IMAGERY
   ========================================================= */


/* ---------------------------------------------------------
   STRONG FAMILIES
   --------------------------------------------------------- */

.ci-strong{
  background:
    url('/assets/community-impact/strong-families-v9.jpg')
    center 42% / cover no-repeat !important;
}

.ci-service-card.ministry{
  background:
    linear-gradient(
      to top,
      rgba(5,5,5,.97),
      rgba(5,5,5,.48)
    ),
    url('/assets/community-impact/strong-families-v9.jpg')
    center 42% / cover no-repeat !important;
}


/* ---------------------------------------------------------
   SEASON OF GIVING
   --------------------------------------------------------- */

.ci-giving{
  background:
    url('/assets/community-impact/season-giving-v9.jpg')
    center 46% / cover no-repeat !important;
}


/* ---------------------------------------------------------
   FEATURE PHOTOS
   --------------------------------------------------------- */

.ci-feature-image img[
  src="/assets/community-impact/strong-families-v9.jpg"
]{
  object-position:center 43% !important;
}

.ci-feature-image img[
  src="/assets/community-impact/season-giving-v9.jpg"
]{
  object-position:center 46% !important;
}


/* ---------------------------------------------------------
   STRONG FAMILIES SUBPAGE
   --------------------------------------------------------- */

body:has(
  .ci-subhero[
    style*="strong-families-v9.jpg"
  ]
)
.ci-subhero{
  background-position:
    68% center !important;
}


/* ---------------------------------------------------------
   SEASON OF GIVING SUBPAGE
   --------------------------------------------------------- */

body:has(
  .ci-subhero[
    style*="season-giving-v9.jpg"
  ]
)
.ci-subhero{
  background-position:
    70% center !important;
}


/* ---------------------------------------------------------
   MOBILE CROPS
   --------------------------------------------------------- */

@media(max-width:980px){

  body:has(
    .ci-subhero[
      style*="strong-families-v9.jpg"
    ]
  )
  .ci-subhero{
    background-position:
      62% center !important;
  }

  body:has(
    .ci-subhero[
      style*="season-giving-v9.jpg"
    ]
  )
  .ci-subhero{
    background-position:
      62% center !important;
  }

}


/* =========================================================
   END V9
   ========================================================= */

/* =========================================================
   COMMUNITY IMPACT V10
   KAM-GENERATED SEASON OF GIVING IMAGE
   ========================================================= */

.ci-giving{
  background:
    url('/assets/community-impact/season-giving-kam-v10.jpg')
    center center / cover no-repeat !important;
}

body:has(
  .ci-subhero[
    style*="season-giving-kam-v10.jpg"
  ]
)
.ci-subhero{
  background-position:68% center !important;
}

.ci-feature-image img[
  src="/assets/community-impact/season-giving-kam-v10.jpg"
]{
  object-position:center center !important;
}

@media(max-width:980px){

  body:has(
    .ci-subhero[
      style*="season-giving-kam-v10.jpg"
    ]
  )
  .ci-subhero{
    background-position:62% center !important;
  }

}