:root{
    /* ===== EDIT: palette ===== */
    --ink:        #241F1A;   /* body text */
    --dove:       #8A8172;   /* muted / secondary text */
    --ivory:      #FAF6EE;   /* page background */
    --ivory-dim:  #F1EADC;   /* alternate section background */
    --night:      #191C36;   /* deep indigo — hero / dark sections */
    --night-2:    #23274A;   /* lighter indigo for gradients */
    --gold:       #C89A3E;   /* primary accent — light / glory */
    --gold-bright:#E4C067;
    --ember:      #A8462B;   /* secondary accent — warmth */
    --line:       rgba(36,31,26,0.12);
    --line-dark:  rgba(255,255,255,0.14);

    /* ===== EDIT: colourful accent set (used for cards, service times, hero glow) ===== */
    --c-violet:    #7048D6;
    --c-sky:       #2E9BE0;
    --c-coral:     #F2542D;
    --c-sun:       #F7B733;
    --c-magenta:   #D6428C;
    --c-teal:      #16A392;

    --display: "Fraunces", Georgia, serif;
    --body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:    "IBM Plex Mono", monospace;

    --container: 1160px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  #about, #involved, #join, #healing, #location{ scroll-margin-top: 90px; }
  body{
    font-family: var(--body);
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  .wrap{ max-width: var(--container); margin:0 auto; padding: 0 28px; }
  section{ position:relative; }

  h1,h2,h3,h4{ font-family: var(--display); font-weight:600; letter-spacing:-0.01em; }

  .eyebrow{
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-coral);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 18px;
  }
  .eyebrow::before{
    content:"";
    width: 26px; height:1px;
    background: var(--c-coral);
    display:inline-block;
  }
  .on-dark .eyebrow{ color: var(--gold-bright); }
  .on-dark .eyebrow::before{ background: var(--gold-bright); }

  /* ---------- reveal-on-scroll ---------- */
  .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- header ---------- */
  header{
    position: fixed; top:0; left:0; right:0; z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  header.header-scrolled{
    background: rgba(250,246,238,0.92);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 28px;
    max-width: var(--container); margin:0 auto;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family: var(--display); font-weight:600; font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ivory);
    transition: color .3s ease;
  }
  header.header-scrolled .brand{ color: var(--ink); }
  .logo-img{
    height: 40px; width:auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
  }
  nav.links{ display:flex; gap: 30px; align-items:center; }
  nav.links a{
    font-size: 13px; font-weight:600; color: var(--ivory); opacity:.92;
    text-transform: uppercase; letter-spacing: 0.05em;
    transition: opacity .2s ease, color .3s ease;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  }
  nav.links a:hover{ opacity:1; }
  header.header-scrolled nav.links a{ color: var(--ink); opacity:.82; text-shadow:none; }
  .nav-cta{
    background: var(--night); color: var(--ivory) !important;
    padding: 10px 20px; border-radius: 999px; font-weight:600 !important;
    opacity:1 !important; text-shadow:none !important;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .nav-cta:hover{ background: var(--ember); }
  .menu-toggle{ display:none; background:none; border:none; cursor:pointer; }
  .menu-toggle span{ display:block; width:24px; height:2px; background:var(--ivory); margin:5px 0; transition: background .3s ease; }
  header.header-scrolled .menu-toggle span{ background: var(--ink); }

  @media (max-width: 860px){
    nav.links{
      position:fixed; inset: 64px 0 0 0; background: var(--ivory);
      flex-direction:column; padding: 30px 28px; gap: 22px;
      transform: translateY(-110%); transition: transform .35s ease;
    }
    nav.links.open{ transform: translateY(0); }
    nav.links a{ color: var(--ink) !important; opacity:.85; text-shadow:none; }
    .menu-toggle{ display:block; }
  }

  /* ---------- hero ---------- */
  .hero{
    position: relative;
  }
  .hero-photo{
    position: relative;
    height: 78vh;
    min-height: 460px;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
  }
  .hero-bg-slide{
    position:absolute; inset:0;
    background-size: cover;
    background-position: top center;
    opacity:0;
    transition: opacity 1.6s ease;
  }
  .hero-bg-slide.is-active{ opacity:1; }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(12,14,30,0.55) 0%, transparent 22%, transparent 75%, rgba(12,14,30,0.35) 100%);
  }
  .hero-content{
    background: var(--night);
    color: var(--ivory);
    padding: 64px 0 72px;
    position: relative;
    overflow: hidden;
  }
  .hero-content::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 55% 60% at 85% 0%, rgba(247,183,51,0.28), transparent 60%),
      radial-gradient(ellipse 50% 50% at 5% 100%, rgba(214,66,140,0.2), transparent 60%);
  }
  .hero-grid{
    position: relative; z-index: 2;
    max-width: 560px;
  }
  .hero h1{
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.04;
    color: var(--ivory);
  }
  .hero h1 em{
    font-style: italic; color: var(--gold-bright);
  }
  .hero p.lead{
    margin-top: 22px; max-width: 480px;
    font-size: 17.5px; color: rgba(250,246,238,0.78);
  }
  .hero-actions{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 26px; border-radius: 999px;
    font-weight:600; font-size:14.5px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    border: 1px solid transparent;
  }
  .btn-gold{ background: linear-gradient(120deg, var(--gold), var(--gold-bright)); color: var(--night); }
  .btn-gold:hover{ transform: translateY(-2px); }
  .btn-outline{ border-color: rgba(250,246,238,0.4); color: var(--ivory); }
  .btn-outline:hover{ border-color: var(--gold-bright); color: var(--gold-bright); }
  .btn-dark{ background: var(--night); color: var(--ivory); }
  .btn-dark:hover{ background: var(--ember); }

  /* verse ornament */
  .verse-card{
    background: rgba(255,255,255,0.06);
    border: 1px solid transparent;
    background-image: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
      linear-gradient(120deg, var(--c-sun), var(--c-coral), var(--c-magenta), var(--c-violet));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 18px;
    padding: 30px;
    backdrop-filter: blur(6px);
  }
  .verse-card p{ font-family: var(--display); font-style:italic; font-size: 19px; line-height:1.5; color: var(--ivory); }
  .verse-card span{ display:block; margin-top:14px; font-family: var(--mono); font-size:12px; letter-spacing:.08em; color: var(--gold-bright); text-transform:uppercase; }

  /* ---------- service strip ---------- */
  .service-strip{
    margin-top: -64px;
    position: relative; z-index: 5;
  }
  .service-card{
    background: var(--ivory);
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(25,28,54,0.35);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    overflow:hidden;
  }
  .service-item{
    padding: 30px 26px;
    border-right: 1px solid var(--line);
    border-top: 4px solid var(--accent, var(--c-violet));
  }
  .service-item:nth-child(1){ --accent: var(--c-coral); }
  .service-item:nth-child(2){ --accent: var(--c-violet); }
  .service-item:nth-child(3){ --accent: var(--c-sky); }
  .service-item:last-child{ border-right:none; }
  .service-item .t{
    font-family: var(--mono); font-size: 26px; color: var(--night); font-weight:500;
  }
  .service-item .d{
    margin-top:6px; font-size: 13.5px; color: var(--dove); text-transform:uppercase; letter-spacing:.06em;
  }
  @media (max-width: 760px){
    .service-card{ grid-template-columns: repeat(2,1fr); }
    .service-item:nth-child(2){ border-right:none; }
    .service-item{ border-bottom: 1px solid var(--line); }
  }

  /* ---------- section spacing ---------- */
  .section{ padding: 120px 0; }
  .section-tight{ padding: 90px 0; }
  .section-dark{ background: var(--night); color: var(--ivory); }
  .section-dim{ background: var(--ivory-dim); }

  /* ---------- welcome / about ---------- */
  .about-grid{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items:start;
    padding-bottom: 30px;
  }
  .about-grid h2{ font-size: clamp(30px,4vw,42px); line-height:1.1; }
  .about-copy p{ color: var(--ink); opacity:.85; margin-bottom: 16px; max-width: 560px; }
  a.link-arrow{
    font-weight:600; color: var(--c-coral); display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  }
  a.link-arrow::after{ content:"→"; transition: transform .2s ease; }
  a.link-arrow:hover::after{ transform: translateX(5px); }
  .about-media{
    position: relative;
    aspect-ratio: 4/5;
  }
  .about-media .photo-main{
    width:100%; height:100%; object-fit:cover; object-position: top center;
    border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(25,28,54,0.35);
  }
  .about-media .photo-inset{
    position:absolute;
    width: 46%;
    aspect-ratio: 4/5;
    object-fit:cover; object-position: top center;
    border-radius: 16px;
    border: 5px solid var(--ivory);
    box-shadow: 0 18px 40px -16px rgba(25,28,54,0.45);
    right: -8%; bottom: -10%;
  }
  .about-media .caption{
    position:absolute; left:0; bottom:-38px;
    font-family: var(--mono); font-size: 12.5px; letter-spacing:.04em; color: var(--dove);
  }
  @media (max-width: 640px){
    .about-media .photo-inset{ right:auto; left:-4%; bottom:-8%; width:42%; }
  }

  /* ---------- signature: light-break divider ---------- */
  .light-break{
    height: 3px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--c-coral) 15%, var(--c-sun) 35%, var(--c-magenta) 55%, var(--c-violet) 75%, var(--c-sky) 90%, transparent);
    opacity: .6;
  }

  /* ---------- ministry / get involved cards ---------- */
  .cards-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom: 50px; flex-wrap:wrap; }
  .cards-head h2{ font-size: clamp(28px,3.6vw,38px); max-width: 560px; }
  .card-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .card{
    background: var(--ivory);
    border: 1px solid var(--line);
    border-top: 4px solid var(--accent, var(--c-violet));
    border-radius: 16px;
    padding: 30px 26px;
    transition: border-color .2s ease, transform .2s ease;
  }
  .card:nth-child(1){ --accent: var(--c-coral); }
  .card:nth-child(2){ --accent: var(--c-sun); }
  .card:nth-child(3){ --accent: var(--c-magenta); }
  .card:nth-child(4){ --accent: var(--c-sky); }
  .card:hover{ transform: translateY(-4px); }
  .card .num{ font-family: var(--mono); color: var(--accent, var(--c-coral)); font-size:13px; letter-spacing:.06em; font-weight:600; }
  .card h3{ font-size: 19px; margin-top: 14px; margin-bottom: 10px; }
  .card p{ font-size: 14.5px; color: var(--dove); }
  @media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .card-grid{ grid-template-columns: 1fr; } }

  /* ---------- CTA band ---------- */
  .cta-band{
    background: linear-gradient(120deg, var(--c-coral), var(--c-magenta));
    color: var(--ivory);
    border-radius: 26px;
    padding: 60px 50px;
    display:flex; justify-content:space-between; align-items:center; gap: 30px; flex-wrap:wrap;
  }
  .cta-band h3{ font-size: clamp(24px,3vw,32px); max-width: 480px; }
  .cta-band p{ opacity:.85; margin-top:10px; max-width:480px; }

  /* ---------- healing / join ---------- */
  .split{
    display:grid; grid-template-columns: 1fr 1fr;
  }
  .split > div{ padding: 100px 60px; }
  .split > div:first-child{ background: linear-gradient(135deg, #FFF5E4, #FDEAE0); }
  .split .panel-dark{ background: linear-gradient(150deg, var(--night), #2c1f4a); color: var(--ivory); }
  .split h2{ font-size: clamp(26px,3.4vw,34px); max-width: 420px; }
  .split p{ opacity:.85; margin-top: 16px; max-width: 420px; }
  @media (max-width: 860px){
    .split{ grid-template-columns: 1fr; }
    .split > div{ padding: 70px 30px; }
  }

  /* ---------- location ---------- */
  .location-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
  .location-list{ margin-top: 26px; }
  .location-list li{
    display:flex; justify-content:space-between; padding: 16px 0; border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .location-list li span:first-child{ color: var(--dove); }
  .location-list li span:last-child{ font-family: var(--mono); font-weight:500; }
  .map-frame{
    border-radius: 20px; overflow:hidden; border:1px solid var(--line);
    aspect-ratio: 4/3;
  }
  @media (max-width: 860px){ .location-grid{ grid-template-columns:1fr; } }

  /* ---------- footer ---------- */
  footer{ background: var(--night); color: rgba(250,246,238,0.7); padding: 80px 0 30px; }
  .footer-grid{
    display:grid; grid-template-columns: 1.3fr 1fr 0.9fr 0.9fr 1.1fr; gap: 36px;
  }
  .footer-photo{
    width:100%; aspect-ratio: 1/1; object-fit:cover; object-position: top center;
    border-radius: 12px; margin-top: 4px;
  }
  .footer-grid h4{ color: var(--ivory); font-size: 15px; margin-bottom: 18px; font-family: var(--body); font-weight:600; }
  .footer-grid ul li{ margin-bottom: 10px; font-size: 14px; }
  .footer-grid ul li a:hover{ color: var(--gold-bright); }
  .footer-brand p{ margin-top: 14px; font-size: 14px; max-width: 280px; }
  .footer-bottom{
    margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line-dark);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size: 13px;
  }
  @media (max-width: 960px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } }
  @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- internal page banner (About/Get Involved/etc.) ---------- */
.page-banner{
  background: linear-gradient(150deg, var(--night) 0%, var(--night-2) 60%, #1c2040 100%);
  color: var(--ivory);
  padding: 150px 0 70px;
  position: relative;
  overflow:hidden;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 60% at 85% 0%, rgba(247,183,51,0.28), transparent 60%),
    radial-gradient(ellipse 50% 50% at 5% 100%, rgba(214,66,140,0.2), transparent 60%);
}
.page-banner .wrap{ position:relative; z-index:2; }
.page-banner h1{ font-size: clamp(32px, 5vw, 48px); }
.page-banner p.lead{ margin-top:14px; max-width:560px; color: rgba(250,246,238,0.78); font-size:16.5px; }

/* nav current-page state */
nav.links a.is-current{ opacity:1; position:relative; }
nav.links a.is-current::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background: currentColor; opacity:.6;
}

/* simple content page sections */
.page-section{ padding: 90px 0; }
.page-section + .page-section{ padding-top:0; }
.prose{ max-width: 720px; }
.prose p{ margin-bottom:16px; color: var(--ink); opacity:.85; }
.prose h2{ font-size: clamp(26px,3.4vw,34px); margin-bottom:20px; }

/* simple form (Contact / Give pages) */
.simple-form{ display:grid; gap:16px; max-width:480px; }
.simple-form label{ font-size:13px; font-weight:600; color: var(--dove); display:block; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.simple-form input, .simple-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  font-family: var(--body); font-size:14.5px; background: var(--ivory);
}
.simple-form textarea{ min-height:120px; resize:vertical; }

/* give page: ways-to-give cards */
.give-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:10px; }
@media (max-width:860px){ .give-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ chatbot widget ---------- */
#lw-chat-widget{
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  font-family: var(--body);
}
#lw-chat-toggle{
  width: 58px; height:58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-coral), var(--c-magenta), var(--c-violet));
  color: var(--ivory);
  border:none; cursor:pointer;
  display:grid; place-items:center;
  box-shadow: 0 14px 30px -8px rgba(168,70,45,0.5);
  transition: transform .2s ease;
}
#lw-chat-toggle:hover{ transform: translateY(-2px) scale(1.03); }
#lw-chat-panel{
  position:absolute; right:0; bottom:74px;
  width: 340px; max-width: calc(100vw - 44px);
  height: 460px; max-height: calc(100vh - 140px);
  background: var(--ivory);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(25,28,54,0.45);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; transform: translateY(12px) scale(.97);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
#lw-chat-panel.is-open{
  opacity:1; transform:none; pointer-events:auto;
}
#lw-chat-header{
  background: linear-gradient(120deg, var(--night), var(--night-2));
  color: var(--ivory);
  padding: 16px 18px;
  display:flex; align-items:center; gap:10px;
}
#lw-chat-header img{ height:30px; width:auto; }
#lw-chat-title{ font-family: var(--display); font-weight:600; font-size:15px; }
#lw-chat-subtitle{ font-size:12px; opacity:.7; margin-top:2px; }
#lw-chat-messages{
  flex:1; overflow-y:auto; padding: 16px;
  display:flex; flex-direction:column; gap:10px;
}
.lw-chat-msg{
  max-width: 82%; padding: 10px 13px; border-radius: 14px;
  font-size: 13.5px; line-height:1.5;
}
.lw-chat-msg a{ text-decoration:underline; font-weight:600; }
.lw-chat-msg-bot{
  background: var(--ivory-dim); color: var(--ink);
  align-self:flex-start; border-bottom-left-radius:4px;
}
.lw-chat-msg-user{
  background: var(--night); color: var(--ivory);
  align-self:flex-end; border-bottom-right-radius:4px;
}
#lw-chat-form{
  display:flex; gap:8px; padding: 12px; border-top: 1px solid var(--line);
  background: var(--ivory);
}
#lw-chat-input{
  flex:1; border:1px solid var(--line); border-radius:999px;
  padding: 10px 14px; font-size:13.5px; font-family: var(--body);
  background:#fff;
}
#lw-chat-input:focus{ outline:2px solid var(--c-violet); outline-offset:1px; }
#lw-chat-form button{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background: var(--c-violet); color:#fff; display:grid; place-items:center;
  flex-shrink:0;
}
#lw-chat-form button:hover{ background: var(--c-magenta); }

@media (max-width: 480px){
  #lw-chat-widget{ right:14px; bottom:14px; }
  #lw-chat-panel{ width: calc(100vw - 28px); }
}

/* ---------- footer social icons ---------- */
.social-links{
  display:flex; gap:12px; margin-top:20px;
}
.social-links a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-dark);
  display:grid; place-items:center;
  color: var(--ivory); opacity:.8;
  transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}
.social-links a:hover{
  opacity:1;
  background: linear-gradient(135deg, var(--c-coral), var(--c-magenta), var(--c-violet));
  border-color: transparent;
}