@font-face{
  
  font-family:Lato;
  
  src:url('/public/fonts/lato-regular.ttf') format('truetype');
  
  font-weight:400;
  
  font-display:swap}


@font-face{
  
  font-family:Lato;
  
  src:url('/public/fonts/lato-bold.ttf') format('truetype');
  
  font-weight:700;
  
  font-display:swap}


@font-face{
  
  font-family:ReferenceCondensed;
  
  src:url('/public/fonts/roboto-condensed.ttf') format('truetype');
  
  font-weight:100 900;
  
  font-display:swap}


:root{
  
  color-scheme:dark;
  
  --cream:#f7eee3;
  
  --gold:#efcda0;
  
  --burgundy:#4d0b06;
  
  --border:#865039;
  
  --text:#eee6e0;
  
  font-family:Lato,Arial,sans-serif;
  
  background:#292c2b;
  
  color:var(--text)}


*{
  
  box-sizing:border-box}

html{
  
  scroll-behavior:smooth}

body{
  
  margin:13px 8px 12px 3px}

a{
  
  color:inherit;
  
  text-decoration:none}

button{
  
  font:inherit}

img{
  
  display:block}

h1,h2,h3,p,figure,blockquote{
  
  margin:0}

a,button{
  
  -webkit-tap-highlight-color:transparent}

a:focus-visible,button:focus-visible{
  
  outline:2px solid var(--gold);
  
  outline-offset:5px}

section,aside{
  
  scroll-margin-top:20px}


.site{
  
  container-type:inline-size;
  
  background:var(--burgundy);
  
  overflow:hidden;
  
  --u:min(.0621118012cqw,calc(.110375vh - .027px))}


.header{
  
  z-index:5;
  
  height:calc(78*var(--u));
  
  position:relative;
  
  display:flex;
  
  align-items:center;
  
  border-bottom:calc(1*var(--u)) solid #80522f;
  
  background:linear-gradient(110deg,#520e05,#420805 63%,#4b0b07)}


.brand{
  
  position:absolute;
  
  left:calc(90*var(--u));
  
  top:calc(7*var(--u));
  
  width:calc(197*var(--u))}

.ministry-logo{
  
  width:100%;
  
  height:auto}

.navigation{
  
  display:flex;
  
  align-items:center;
  
  justify-content:space-between;
  
  position:absolute;
  
  left:calc(508*var(--u));
  
  right:calc(377*var(--u));
  
  height:100%;
  
  font-family:ReferenceCondensed,"Arial Narrow",Arial,sans-serif;
  
  font-size:calc(15.5*var(--u));
  
  font-weight:400;
  
  letter-spacing:calc(.5*var(--u));
  
  white-space:nowrap}

.navigation a{
  
  position:relative;
  
  padding:calc(12*var(--u)) 0;
  
  transition:color .2s}

.navigation a::after{
  
  content:"";
  
  position:absolute;
  
  bottom:calc(3*var(--u));
  
  left:0;
  
  width:100%;
  
  height:calc(2*var(--u));
  
  background:var(--gold);
  
  transform:scaleX(0);
  
  transition:transform .2s;
  
  transform-origin:center}

.navigation a:hover{
  
  color:var(--gold)}

.navigation a:hover::after,.navigation a[aria-current]::after{
  
  transform:scaleX(1)}


.pill{
  
  display:inline-flex;
  
  align-items:center;
  
  justify-content:center;
  
  gap:calc(13*var(--u));
  
  height:calc(37*var(--u));
  
  width:calc(186*var(--u));
  
  background:linear-gradient(100deg,#f4d6aa,#ecc29a);
  
  color:#241a10;
  
  border-radius:100px;
  
  font-size:calc(15*var(--u));
  
  font-weight:700;
  
  letter-spacing:calc(1.1*var(--u));
  
  transition:filter .2s}

.pill:hover{
  
  filter:brightness(1.08)}

.arrow{
  
  width:calc(12*var(--u));
  
  height:calc(16*var(--u));
  
  transition:transform .2s}

.pill:hover .arrow{
  
  transform:translateX(3px)}

.header-cta{
  
  position:absolute;
  
  right:calc(84*var(--u));
  
  width:calc(189*var(--u));
  
  height:calc(46*var(--u));
  
  top:calc(16*var(--u))}

.menu-toggle{
  
  display:none}


.hero{
  
  height:calc(442*var(--u));
  
  position:relative;
  
  background:radial-gradient(ellipse at 30% 40%,#581009 0,#4a0a05 60%,#430b06 90%);
  
  border-bottom:calc(2*var(--u)) solid #a3371e;
  
  overflow:hidden}

.hero-art{
  
  position:absolute;
  
  left:calc(417*var(--u));
  
  top:0;
  
  width:calc(790*var(--u));
  
  height:100%;
  
  overflow:hidden}

.hero-art img{
  
  width:100%;
  
  height:100%;
  
  object-fit:cover}

.hero-art:after{
  
  position:absolute;
  
  inset:0;
  
  content:"";
  
  background:linear-gradient(90deg,#540c07 0,transparent 13%,transparent 92%,#12100c 100%)}


.hero-headline{
  
  position:absolute;
  
  top:calc(29*var(--u));
  
  left:calc(97*var(--u));
  
  font-family:"Times New Roman",Times,serif;
  
  font-size:calc(84*var(--u));
  
  font-weight:400;
  
  line-height:calc(70*var(--u));
  
  color:#fcf5e9;
  
  letter-spacing:calc(-1.2*var(--u));
  
  z-index:1}

.hero-headline span{
  
  display:block}

.hero-headline .small{
  
  font-size:calc(28*var(--u));
  
  line-height:calc(28*var(--u));
  
  letter-spacing:calc(2*var(--u))}

.hero-headline span:nth-child(4){
  
  font-size:calc(82*var(--u))}

.hero-headline span:nth-child(3),.hero-headline span:nth-child(5){
  
  line-height:calc(24*var(--u))}


.contact-panel{
  
  position:absolute;
  
  left:calc(1207*var(--u));
  
  right:0;
  
  top:0;
  
  bottom:0;
  
  background:linear-gradient(90deg,#100e0cd9,#100e0ce0),url("/public/images/contact-texture.png") center/100% 100%;
  
  padding:calc(18*var(--u)) calc(40*var(--u)) 0 0}

.contact-panel>.ministry-logo{
  
  width:calc(330*var(--u));
  
  height:calc(109*var(--u));
  
  object-fit:contain}

.contact-panel h2{
  
  font-size:calc(20*var(--u));
  
  font-weight:400;
  
  letter-spacing:calc(.7*var(--u));
  
  line-height:calc(31*var(--u));
  
  margin-top:calc(9*var(--u));
  
  width:calc(160*var(--u));
  
  border-bottom:calc(2*var(--u)) solid #b5b1a1}

.contact-rows{
  
  margin-top:calc(7*var(--u));
  
  display:grid;
  
  gap:calc(2*var(--u))}

.contact-rows a{
  
  display:flex;
  
  align-items:center;
  
  gap:calc(23*var(--u));
  
  font-size:calc(17*var(--u));
  
  line-height:calc(21*var(--u));
  
  min-height:calc(40*var(--u));
  
  width:max-content;
  
  max-width:100%;
  
  transition:color .2s}

.contact-rows a:hover{
  
  color:var(--gold)}

.contact-rows .icon{
  
  width:calc(43*var(--u));
  
  height:calc(40*var(--u));
  
  object-fit:contain;
  
  flex-shrink:0}

.contact-rows a:nth-child(4){
  
  margin-top:calc(4*var(--u))}

.nonprofit{
  
  position:relative;
  
  margin-top:calc(32*var(--u));
  
  font-size:calc(15.5*var(--u));
  
  line-height:calc(20*var(--u));
  
  white-space:nowrap}

.nonprofit:before{
  
  content:"";
  
  width:calc(70*var(--u));
  
  height:calc(2*var(--u));
  
  background:#b4b1a1;
  
  position:absolute;
  
  top:calc(-16*var(--u));
  
  left:0}


.scripture{
  
  position:absolute;
  
  left:0;
  
  bottom:0;
  
  width:calc(811*var(--u));
  
  height:calc(113*var(--u));
  
  display:flex;
  
  background:linear-gradient(90deg,#4a0b06,#590d07e6 80%,#64120be6);
  
  border-top:calc(1*var(--u)) solid #a63b20;
  
  z-index:2}

.daniel-image{
  
  width:calc(320*var(--u));
  
  height:100%;
  
  object-fit:cover}

.scripture blockquote{
  
  position:absolute;
  
  left:calc(380*var(--u));
  
  top:calc(11*var(--u));
  
  font-size:calc(16.5*var(--u));
  
  line-height:calc(19.5*var(--u));
  
  letter-spacing:calc(.03*var(--u));
  
  color:#e9dcd4}

.scripture cite{
  
  display:block;
  
  font-style:normal;
  
  font-size:calc(12*var(--u));
  
  line-height:calc(16*var(--u));
  
  letter-spacing:calc(2*var(--u))}

.quote-open,.quote-close{
  
  position:absolute;
  
  color:#efcea0;
  
  font-family:Georgia,serif;
  
  font-size:calc(86*var(--u));
  
  line-height:1}

.quote-open{
  
  left:calc(324*var(--u));
  
  top:calc(3*var(--u))}

.quote-close{
  
  right:calc(2*var(--u));
  
  bottom:calc(-28*var(--u))}


.prayer{
  
  height:calc(279*var(--u));
  
  display:grid;
  
  grid-template-columns:calc(417*var(--u)) 1fr;
  
  border-bottom:calc(1*var(--u)) solid #854025;
  
  background:linear-gradient(115deg,#570f08,#65170e 65%,#63150d)}

.prayer-intro{
  
  padding:calc(9*var(--u)) calc(20*var(--u)) 0 calc(61*var(--u));
  
  background:radial-gradient(ellipse at 40% 0,#68180f,#450b05 95%)}

.eyebrow{
  
  font-size:calc(16*var(--u));
  
  line-height:calc(23*var(--u));
  
  letter-spacing:calc(2.4*var(--u));
  
  font-weight:400;
  
  white-space:nowrap}

.prayer-intro h2{
  
  transform:translateY(calc(-3*var(--u))) scaleX(1.065);
  
  transform-origin:left center;
  
  font-family:"Times New Roman",Times,serif;
  
  font-weight:400;
  
  font-size:calc(62*var(--u));
  
  line-height:calc(57*var(--u));
  
  letter-spacing:calc(1*var(--u));
  
  margin-left:calc(-4*var(--u));
  
  color:#fff5e9}

.gold-rule{
  
  width:calc(37*var(--u));
  
  height:calc(2*var(--u));
  
  background:#c9ab78;
  
  margin-top:calc(1*var(--u));
  
  margin-bottom:calc(11*var(--u))}

.intro-copy{
  
  font-size:calc(16*var(--u));
  
  line-height:calc(20*var(--u));
  
  letter-spacing:calc(.02*var(--u))}

.prayer-intro .pill{
  
  margin-top:calc(7*var(--u));
  
  margin-left:calc(-8*var(--u))}


.principles{
  
  padding-right:calc(30*var(--u));
  
  min-width:0}

.principles>h2{
  
  height:calc(32*var(--u));
  
  background:linear-gradient(90deg,#400d09,#25110b 55%,#51100a);
  
  font-size:calc(19*var(--u));
  
  line-height:calc(32*var(--u));
  
  font-weight:400;
  
  letter-spacing:calc(2.2*var(--u));
  
  text-align:center;
  
  white-space:nowrap;
  
  margin-right:calc(-30*var(--u))}

.principle-grid{
  
  display:grid;
  
  grid-template-columns:220fr 232fr 239fr 249fr 223fr;
  
  height:calc(246*var(--u))}

.principle{
  
  position:relative;
  
  border-right:calc(1*var(--u)) solid #873426;
  
  background:radial-gradient(ellipse at 45% 25%,#6c1c12,#58130c 85%);
  
  padding:0 calc(27*var(--u));
  
  min-width:0}

.principle:last-child{
  
  border-right:0}

.principle-number{
  
  position:absolute;
  
  top:0;
  
  left:0;
  
  right:0;
  
  text-align:center;
  
  font-family:"Times New Roman",Times,serif;
  
  font-size:calc(39*var(--u));
  
  line-height:calc(44*var(--u));
  
  height:calc(44*var(--u));
  
  font-weight:400}

.principle .icon{
  
  position:absolute;
  
  top:calc(44*var(--u));
  
  left:50%;
  
  transform:translateX(-50%);
  
  width:calc(64*var(--u));
  
  height:calc(58*var(--u));
  
  object-fit:contain;
  
  margin:auto}

.principle h3{
  
  position:absolute;
  
  top:calc(103*var(--u));
  
  left:0;
  
  right:0;
  
  font-family:ReferenceCondensed,"Arial Narrow",Arial,sans-serif;
  
  text-align:center;
  
  font-size:calc(16*var(--u));
  
  line-height:calc(25*var(--u));
  
  font-weight:400;
  
  letter-spacing:calc(.45*var(--u));
  
  white-space:nowrap;
  
  margin:0}

.principle p{
  
  font-size:calc(16*var(--u));
  
  line-height:calc(19.5*var(--u));
  
  margin-top:calc(134*var(--u));
  
  white-space:nowrap}

.principle:nth-child(4) p{
  
  line-height:calc(16.5*var(--u))}

.principle:nth-child(2){
  
  padding-left:calc(45*var(--u))}

.principle:nth-child(3){
  
  padding-left:calc(38*var(--u))}

.principle:nth-child(4){
  
  padding-left:calc(47*var(--u))}

.principle:nth-child(5){
  
  padding-left:calc(44*var(--u))}


.core-values{
  
  position:relative;
  
  height:calc(107*var(--u));
  
  padding-left:calc(447*var(--u));
  
  background:linear-gradient(90deg,#7a2111,#4d0c06 65%,#5a0e07)}

.sunset-image{
  
  position:absolute;
  
  left:0;
  
  top:0;
  
  width:calc(459*var(--u));
  
  height:100%;
  
  object-fit:cover;
  
  mask-image:linear-gradient(90deg,#000 0,#000 80%,transparent 100%)}

.core-values h2{
  
  padding-right:calc(48*var(--u));
  
  height:calc(27*var(--u));
  
  font-size:calc(19*var(--u));
  
  line-height:calc(27*var(--u));
  
  letter-spacing:calc(2.2*var(--u));
  
  font-weight:400;
  
  text-align:center;
  
  white-space:nowrap;
  
  background:linear-gradient(90deg,#201009b3,#100e0cec);
  
  margin-left:calc(-30*var(--u));
  
  position:relative}

.core-values ul{
  
  margin:0;
  
  padding:0;
  
  list-style:none;
  
  height:calc(80*var(--u));
  
  display:grid;
  
  grid-template-columns:183fr 240fr 227fr 195fr 319fr;
  
  position:relative}

.core-value{
  
  position:relative;
  
  display:flex;
  
  flex-direction:column;
  
  align-items:center;
  
  text-align:center;
  
  justify-content:flex-start;
  
  padding-top:calc(6*var(--u));
  
  gap:calc(1*var(--u));
  
  font-size:calc(13*var(--u));
  
  line-height:calc(17*var(--u));
  
  font-weight:400;
  
  letter-spacing:calc(.7*var(--u))}

.core-value:not(:last-child):after{
  
  content:"";
  
  position:absolute;
  
  right:0;
  
  top:calc(16*var(--u));
  
  height:calc(50*var(--u));
  
  width:calc(1.5*var(--u));
  
  background:#a9885e}

.core-value .icon{
  
  height:calc(32*var(--u));
  
  width:calc(45*var(--u));
  
  object-fit:contain}

.core-value:last-child .icon{
  
  width:calc(49*var(--u))}


.skip-link{
  
  position:fixed;
  
  z-index:20;
  
  top:8px;
  
  left:8px;
  
  padding:12px 18px;
  
  background:var(--gold);
  
  color:#22120c;
  
  transform:translateY(-200%)}

.skip-link:focus{
  
  transform:translateY(0)}


.page-loader{
  
  position:fixed;
  
  inset:0;
  
  z-index:50;
  
  display:grid;
  
  place-items:center;
  
  background:#190907;
  
  transition:opacity .5s ease,transform .5s ease;
  
  pointer-events:none}

.loader-inner{
  
  width:min(330px,65vw);
  
  position:relative}

.loader-inner:before{
  
  content:"";
  
  position:absolute;
  
  inset:-70px;
  
  background:radial-gradient(ellipse,#853c192e,transparent 68%);
  
  z-index:-1}

.loader-inner .ministry-logo{
  
  animation:loader-logo .6s both}

.loader-line{
  
  display:block;
  
  height:1px;
  
  margin:25px auto 0;
  
  background:#b78452;
  
  width:75%;
  
  animation:loader-line .6s both}

.ready .page-loader{
  
  opacity:0;
  
  transform:translateY(-15px)}

.js:not(.ready) .header,.js:not(.ready) .hero-headline span,.js:not(.ready) .contact-panel{
  
  opacity:0}

.ready .header{
  
  animation:reveal .35s both}

.ready .hero-headline span{
  
  animation:reveal .45s both;
  
  animation-delay:calc(.08s * var(--i,0))}

.hero-headline span:nth-child(2){
  
  --i:1}

.hero-headline span:nth-child(3){
  
  --i:2}

.hero-headline span:nth-child(4){
  
  --i:3}

.hero-headline span:nth-child(5){
  
  --i:4}

.hero-headline span:nth-child(6){
  
  --i:5}

.ready .hero-art img{
  
  animation:lion-reveal 1.2s both}

.ready .contact-panel{
  
  animation:contact-reveal .6s .15s both}


@keyframes loader-logo{
  
  from{
  
  opacity:0;
  
  transform:scale(.94)}

to{
  
  opacity:1;
  
  transform:scale(1)}

}

@keyframes loader-line{
  
  from{
  
  transform:scaleX(0)}

to{
  
  transform:scaleX(1)}

}

@keyframes reveal{
  
  from{
  
  opacity:0;
  
  transform:translateY(15px)}

to{
  
  opacity:1;
  
  transform:translateY(0)}

}

@keyframes lion-reveal{
  
  from{
  
  transform:scale(1.03)}

to{
  
  transform:scale(1)}

}

@keyframes contact-reveal{
  
  from{
  
  opacity:0;
  
  transform:translateX(12px)}

to{
  
  opacity:1;
  
  transform:translateX(0)}

}


@media(max-width:1100px){
  
  
 body{
  
  margin:0;
  
  background:#4d0b06}

.site{
  
  --u:1px;
  
  overflow:hidden}

.header{
  
  height:86px;
  
  padding:12px 18px;
  
  gap:14px;
  
  justify-content:space-between}

.brand{
  
  position:static;
  
  width:165px;
  
  flex-shrink:0}

.header-cta{
  
  position:static;
  
  width:135px;
  
  height:37px;
  
  font-size:11px;
  
  letter-spacing:.7px;
  
  gap:6px;
  
  margin-left:auto}

.arrow{
  
  width:10px;
  
  height:14px}

.menu-toggle{
  
  display:flex;
  
  flex-direction:column;
  
  gap:5px;
  
  padding:8px 3px;
  
  background:transparent;
  
  border:0;
  
  color:var(--cream);
  
  cursor:pointer}

.menu-toggle span{
  
  display:block;
  
  width:22px;
  
  height:2px;
  
  background:currentColor}

.navigation{
  
  display:none;
  
  position:absolute;
  
  top:85px;
  
  left:0;
  
  right:0;
  
  z-index:10;
  
  height:auto;
  
  padding:18px 24px;
  
  background:#350904;
  
  box-shadow:0 8px 16px #0006;
  
  font-size:16px;
  
  white-space:normal}

.navigation.open{
  
  display:grid;
  
  gap:7px}

.navigation a{
  
  padding:10px 0}

.navigation a:after{
  
  width:45px}

.hero{
  
  height:auto;
  
  overflow:hidden;
  
  padding-top:26px;
  
  background:radial-gradient(ellipse at top right,#7b2013,#4d0c06 65%)}

.hero-headline{
  
  position:relative;
  
  top:auto;
  
  left:auto;
  
  margin:0 24px 20px;
  
  line-height:.94;
  
  font-size:clamp(52px,11.9vw,80px);
  
  letter-spacing:-.6px}

.hero-headline .small{
  
  font-size:24px;
  
  line-height:29px;
  
  letter-spacing:1.6px}

.hero-headline span:nth-child(4){
  
  font-size:inherit}

.hero-headline span:nth-child(3),.hero-headline span:nth-child(5){
  
  line-height:25px}

.hero-art{
  
  position:relative;
  
  left:auto;
  
  top:auto;
  
  width:100%;
  
  height:340px}

.hero-art img{
  
  object-fit:cover;
  
  object-position:right top;
  
  width:100%;
  
  height:100%}

.hero-art:after{
  
  background:linear-gradient(180deg,#4d0c06 0,transparent 15%,transparent 90%,#20100b 100%)}

.scripture{
  
  position:relative;
  
  bottom:auto;
  
  width:100%;
  
  height:auto;
  
  min-height:230px;
  
  padding:125px 24px 20px;
  
  background:#500e07}

.daniel-image{
  
  position:absolute;
  
  top:0;
  
  left:0;
  
  width:100%;
  
  height:113px;
  
  object-fit:cover;
  
  object-position:left 42%;
  
  mask-image:linear-gradient(90deg,#000,transparent)}

.scripture blockquote{
  
  position:relative;
  
  left:auto;
  
  top:auto;
  
  font-size:16px;
  
  line-height:21px;
  
  max-width:530px;
  
  margin:auto}

.scripture cite{
  
  font-size:11px;
  
  line-height:20px;
  
  letter-spacing:1.7px;
  
  margin-top:5px}

.quote-open{
  
  font-size:62px;
  
  left:auto;
  
  right:24px;
  
  top:50px}

.quote-close{
  
  display:none}

.desktop-break{
  
  display:none}

.contact-panel{
  
  position:relative;
  
  left:auto;
  
  right:auto;
  
  top:auto;
  
  bottom:auto;
  
  padding:24px;
  
  background:#15100b}

.contact-panel>.ministry-logo{
  
  width:min(330px,100%);
  
  height:auto}

.contact-panel h2{
  
  font-size:21px;
  
  line-height:31px;
  
  margin-top:18px;
  
  width:160px}

.contact-rows{
  
  gap:7px;
  
  margin-top:10px}

.contact-rows a{
  
  font-size:17px;
  
  line-height:22px;
  
  min-height:40px;
  
  gap:18px}

.contact-rows .icon{
  
  width:43px;
  
  height:40px}

.nonprofit{
  
  font-size:15px;
  
  line-height:21px;
  
  white-space:normal;
  
  margin-top:30px;
  
  max-width:400px}

.hero{
  
  display:flex;
  
  flex-direction:column}

.hero-headline{
  
  order:0}

.hero-art{
  
  order:1}

.scripture{
  
  order:2}

.contact-panel{
  
  order:3}

.prayer{
  
  height:auto;
  
  display:block}

.prayer-intro{
  
  padding:24px}

.eyebrow{
  
  font-size:15px;
  
  line-height:23px;
  
  letter-spacing:2px;
  
  white-space:normal}

.prayer-intro h2{
  
  transform:none;
  
  font-size:58px;
  
  line-height:60px;
  
  margin-left:0}

.gold-rule{
  
  margin-top:3px;
  
  margin-bottom:14px}

.intro-copy{
  
  font-size:17px;
  
  line-height:23px;
  
  max-width:480px}

.prayer-intro .pill{
  
  margin-top:18px;
  
  margin-left:0;
  
  width:186px;
  
  height:37px;
  
  font-size:14px}

.principles{
  
  padding:0}

.principles>h2{
  
  height:auto;
  
  font-size:16px;
  
  line-height:24px;
  
  padding:12px 24px;
  
  letter-spacing:1.3px;
  
  white-space:normal;
  
  margin:0}

.principle-grid{
  
  height:auto;
  
  display:grid;
  
  grid-template-columns:repeat(2,minmax(0,1fr))}

.principle,.principle:nth-child(n){
  
  padding:14px 18px 24px;
  
  border-bottom:1px solid #873426}

.principle:last-child{
  
  grid-column:1/-1}

.principle-number{
  
  position:static;
  
  font-size:36px;
  
  line-height:43px;
  
  height:43px}

.principle .icon{
  
  position:static;
  
  transform:none;
  
  width:64px;
  
  height:58px}

.principle h3{
  
  position:static;
  
  font-size:14px;
  
  line-height:19px;
  
  white-space:normal;
  
  letter-spacing:.4px;
  
  margin:8px -8px}

.principle p,.principle:nth-child(4) p{
  
  font-size:16px;
  
  line-height:21px;
  
  white-space:normal;
  
  margin-top:7px}

.principle p br{
  
  display:none}

.principle:last-child p{
  
  text-align:center}

.core-values{
  
  height:auto;
  
  min-height:285px;
  
  padding:0;
  
  background:#500e07}

.sunset-image{
  
  width:100%;
  
  height:100%;
  
  object-position:left center;
  
  opacity:.25;
  
  mask-image:linear-gradient(180deg,#000,transparent)}

.core-values h2{
  
  height:auto;
  
  margin:0;
  
  white-space:normal;
  
  font-size:16px;
  
  line-height:24px;
  
  padding:12px 24px;
  
  letter-spacing:1.5px}

.core-values ul{
  
  height:auto;
  
  grid-template-columns:repeat(2,minmax(0,1fr));
  
  padding:12px 8px}

.core-value{
  
  font-size:12px;
  
  line-height:17px;
  
  padding:12px 5px;
  
  gap:5px;
  
  letter-spacing:.6px}

.core-value:last-child{
  
  grid-column:1/-1}

.core-value:not(:last-child):after{
  
  top:15px;
  
  height:50px}

.core-value:nth-child(2n):after{
  
  display:none}

.core-value .icon{
  
  height:32px;
  
  width:45px}

.core-value:last-child .icon{
  
  width:49px}


}


@media(max-width:380px){
  
  .header{
  
  padding:12px;
  
  gap:10px}

.brand{
  
  width:145px}

.header-cta{
  
  width:122px;
  
  font-size:10px}

.hero-headline{
  
  margin-left:20px}

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

.principle:last-child{
  
  grid-column:auto}

.principle p{
  
  text-align:center}

.principle{
  
  border-right:0}

}


@media(prefers-reduced-motion:reduce){
  
  html{
  
  scroll-behavior:auto}

*,*:before,*:after{
  
  animation:none!important;
  
  transition:none!important}

.js:not(.ready) .header,.js:not(.ready) .hero-headline span,.js:not(.ready) .contact-panel{
  
  opacity:1}

.page-loader{
  
  display:none}

}



@media(min-width:761px) and (max-width:1100px){
  
  
 .header{
  
  height:100px;
  
  padding:16px 32px}

.brand{
  
  width:200px}

.header-cta{
  
  width:170px;
  
  height:42px;
  
  font-size:13px;
  
  margin-right:20px}

.hero{
  
  display:grid;
  
  grid-template-columns:1fr 1fr;
  
  padding-top:0}

.hero-headline{
  
  margin:28px 22px;
  
  font-size:clamp(57px,7.3vw,78px);
  
  align-self:center}

.hero-art{
  
  height:390px;
  
  width:100%}

.hero-art:after{
  
  background:linear-gradient(90deg,#4d0c06,transparent 15%,transparent 90%)}

.scripture{
  
  min-height:355px;
  
  padding:150px 28px 28px}

.daniel-image{
  
  height:135px}

.contact-panel{
  
  padding:24px}

.contact-panel>.ministry-logo{
  
  width:285px}

.principle-grid{
  
  grid-template-columns:repeat(3,minmax(0,1fr))}

.principle:last-child{
  
  grid-column:auto}

.core-values ul{
  
  grid-template-columns:repeat(5,minmax(0,1fr))}

.core-value:last-child{
  
  grid-column:auto}

.core-value:nth-child(2n):after{
  
  display:block}

.prayer-intro{
  
  padding:30px 36px}

.intro-copy{
  
  max-width:650px}


}