﻿  :root {
    --gold:        #E8921A;
    --gold-light:  #F5B840;
    --gold-pale:   #FAEAC8;
    --dark:        #1A1428;
    --brown:       #5C3208;
    --cream:       #EDE8D8;
    --cream-light: #F7F4EC;
    --white:       #FFFFFF;
    --text:        #2A1E08;
    --muted:       #7A5C38;
    --red:         #D42020;
    --orange:      #E87820;
    --yellow:      #F0C820;
    --green:       #3A8C28;
    --blue:        #1860B8;
    --violet:      #5828A0;
    --lc-green:    #2E6818;
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body { font-family:'Lato',sans-serif; background:var(--cream-light); color:var(--text); min-height:100vh; }

  /* â”€â”€ RAINBOW STRIPE â”€â”€ */
  .rainbow-stripe {
    height:5px;
    background:linear-gradient(to right,
      var(--red) 0% 14.2%, var(--orange) 14.2% 28.5%,
      var(--yellow) 28.5% 42.8%, var(--green) 42.8% 57.1%,
      var(--blue) 57.1% 71.4%, var(--violet) 71.4% 85.7%,
      var(--gold) 85.7% 100%);
    animation: rainbowShift 6s linear infinite;
    background-size: 200% 100%;
  }
  @keyframes rainbowShift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
  }

  /* â”€â”€ HEADER â”€â”€ */
  header {
    background:var(--dark);
    padding:0 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:5px;
    z-index:100;
    box-shadow:0 4px 24px rgba(0,0,0,0.55);
  }
  .logo-area { display:flex; align-items:center; gap:14px; padding:10px 0; }
  .logo-img { width:68px; height:68px; border-radius:50%; object-fit:contain; border:2px solid var(--gold); background:#000; flex-shrink:0; transition:transform 0.4s ease; }
  .logo-img:hover { transform:rotate(8deg) scale(1.08); }
  .logo-text h1 { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; color:var(--gold-light); line-height:1.15; }
  .logo-text p { font-size:9px; color:rgba(255,255,255,0.4); letter-spacing:3px; text-transform:uppercase; margin-top:1px; }
  nav { display:flex; gap:2px; }
  nav a {
    background:none; border:none; color:rgba(255,255,255,0.55);
    font-family:'Lato',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    padding:8px 13px; cursor:pointer; border-radius:3px;
    transition:all 0.22s; white-space:nowrap;
    border-bottom:2px solid transparent;
    text-decoration:none;
  }
  nav a:hover { color:var(--gold-light); }
  nav a.active { color:var(--gold-light); border-bottom-color:var(--gold); }

  /* â”€â”€ SCROLL REVEAL â”€â”€ */
  .reveal {
    opacity:0;
    transform:translateY(32px);
    transition:opacity 0.65s cubic-bezier(.22,.61,.36,1), transform 0.65s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.visible { opacity:1; transform:translateY(0); }
  .reveal-left  { opacity:0; transform:translateX(-32px); transition:opacity 0.65s ease, transform 0.65s ease; }
  .reveal-left.visible { opacity:1; transform:translateX(0); }
  .reveal-right { opacity:0; transform:translateX(32px);  transition:opacity 0.65s ease, transform 0.65s ease; }
  .reveal-right.visible { opacity:1; transform:translateX(0); }

  /* staggered children */
  .stagger > * { opacity:0; transform:translateY(24px); transition:opacity 0.5s ease, transform 0.5s ease; }
  .stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
  .stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.15s; }
  .stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.25s; }
  .stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.35s; }
  .stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.45s; }
  .stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.55s; }
  .stagger.visible > *:nth-child(7) { opacity:1; transform:none; transition-delay:0.65s; }
  .stagger.visible > *:nth-child(8) { opacity:1; transform:none; transition-delay:0.75s; }

  /* â”€â”€ HERO â”€â”€ */
  .hero {
    background:linear-gradient(150deg,rgba(26,20,40,0.87) 0%,rgba(42,28,14,0.84) 55%,rgba(92,50,8,0.82) 100%), url('images/hero-bg.png') center/cover no-repeat;
    min-height:88vh; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:80px 40px; position:relative; overflow:hidden;
  }
  .hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 75% 55% at 50% 35%, rgba(232,146,26,0.13) 0%, transparent 65%);
    animation:heroPulse 5s ease-in-out infinite;
  }
  @keyframes heroPulse {
    0%,100% { opacity:0.6; }
    50%      { opacity:1; }
  }

  .hero-logo-wrap { position:relative; display:inline-block; margin-bottom:28px; }
  .hero-logo-wrap img {
    width:200px; height:200px; border-radius:50%;
    border:4px solid var(--gold);
    box-shadow:0 0 0 8px rgba(232,146,26,0.15), 0 8px 40px rgba(0,0,0,0.5);
    object-fit:contain; background:#000; position:relative; z-index:1;
    animation:logoPulse 3s ease-in-out infinite;
  }
  @keyframes logoPulse {
    0%,100% { box-shadow:0 0 0 8px rgba(232,146,26,0.15), 0 8px 40px rgba(0,0,0,0.5); }
    50%      { box-shadow:0 0 0 16px rgba(232,146,26,0.08), 0 8px 40px rgba(0,0,0,0.5); }
  }

  /* hero text entrance */
  .hero-content { position:relative; max-width:820px; }
  .hero-eyebrow {
    font-size:10px; letter-spacing:5px; text-transform:uppercase;
    color:var(--gold); font-weight:700; margin-bottom:16px;
    animation:slideDown 0.7s 0.2s both;
  }
  .hero-content h2 {
    font-family:'Playfair Display',serif;
    font-size:clamp(38px,6.5vw,76px); font-weight:900;
    color:var(--white); line-height:1.05; margin-bottom:18px;
    animation:slideDown 0.7s 0.35s both;
  }
  .hero-content h2 span { color:var(--gold-light); display:block; font-style:italic; }
  .hero-verse {
    font-size:15px; color:rgba(255,255,255,0.58); font-style:italic;
    line-height:1.75; margin-bottom:38px; max-width:540px; margin-left:auto; margin-right:auto;
    animation:slideDown 0.7s 0.5s both;
  }
  .hero-verse strong { color:var(--gold); font-style:normal; }
  .hero-cta { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; animation:slideDown 0.7s 0.65s both; }
  @keyframes slideDown {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* â”€â”€ BUTTONS â”€â”€ */
  .btn-primary {
    background:var(--gold); color:var(--dark); border:none;
    padding:14px 30px; font-family:'Lato',sans-serif; font-weight:700;
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    cursor:pointer; border-radius:2px; text-decoration:none;
    transition:background 0.22s, transform 0.22s, box-shadow 0.22s;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-primary:hover { background:var(--gold-light); transform:translateY(-3px); box-shadow:0 6px 20px rgba(232,146,26,0.35); }
  .btn-outline {
    background:transparent; color:var(--white);
    border:1px solid rgba(255,255,255,0.35);
    padding:14px 30px; font-family:'Lato',sans-serif; font-weight:700;
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    cursor:pointer; border-radius:2px; text-decoration:none;
    transition:all 0.22s;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
  .btn-primary i, .btn-outline i { font-size:16px; transition:transform 0.22s; }
  .btn-primary:hover i, .btn-outline:hover i { transform:translateX(3px); }

  /* â”€â”€ SECTION â”€â”€ */
  .section { padding:80px 40px; max-width:1100px; margin:0 auto; }
  .section-label { font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px; }
  .section-title { font-family:'Playfair Display',serif; font-size:clamp(26px,4vw,44px); font-weight:700; color:var(--dark); margin-bottom:14px; line-height:1.18; }
  .section-subtitle { font-size:15px; color:var(--muted); line-height:1.85; max-width:640px; margin-bottom:48px; }
  .divider { width:56px; height:3px; background:var(--gold); margin:16px 0 28px; }

  /* â”€â”€ CARDS â”€â”€ */
  .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
  .card {
    background:var(--white); border-radius:5px; padding:30px 26px;
    border-left:4px solid var(--gold);
    box-shadow:0 2px 14px rgba(90,50,8,0.07);
    transition:transform 0.28s cubic-bezier(.22,.61,.36,1), box-shadow 0.28s ease;
    position:relative; overflow:hidden;
    background-image:radial-gradient(circle, rgba(232,146,26,0.07) 1px, transparent 1px);
    background-size:18px 18px;
  }
  .card:hover { transform:translateY(-6px); box-shadow:0 12px 32px rgba(90,50,8,0.14); }
  .card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:10px;
    background-color:var(--gold);
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 13px, rgba(255,255,255,0.22) 13px, rgba(255,255,255,0.22) 14px),
      repeating-linear-gradient(0deg,  transparent 0, transparent 4px,  rgba(255,255,255,0.22) 4px,  rgba(255,255,255,0.22) 5px);
  }
  .card-icon {
    width:56px; height:56px; border-radius:50%;
    background:transparent; display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
    transition:transform 0.28s;
  }
  .card:hover .card-icon { transform:scale(1.12) rotate(-5deg); }
  .card-icon i { font-size:22px; color:var(--gold); }
  .card-icon img.jck-icon { width:56px; height:56px; transition:transform 0.28s; }
  .card h3 { font-family:'Playfair Display',serif; font-size:19px; color:var(--dark); margin-bottom:8px; }
  .card p { font-size:14px; color:var(--muted); line-height:1.78; }

  /* â”€â”€ DEPARTMENTS â”€â”€ */
  .dept-list { display:flex; flex-direction:column; gap:8px; }
  .dept-item { background:var(--white); border-radius:5px; overflow:hidden; box-shadow:0 1px 8px rgba(90,50,8,0.06); }
  .dept-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 26px; cursor:pointer; border-left:4px solid transparent;
    transition:border-color 0.2s, background 0.2s;
  }
  .dept-header:hover { background:var(--gold-pale); border-left-color:var(--gold); }
  .dept-header.open { background:var(--dark); border-left-color:var(--gold); }
  .dept-header.open .dept-title { color:var(--white); }
  .dept-header.open .dept-arrow i { color:var(--gold); transform:rotate(180deg); }
  .dept-title { font-family:'Playfair Display',serif; font-size:17px; color:var(--dark); display:flex; align-items:center; gap:14px; }
  .dept-title-icon {
    width:36px; height:36px; border-radius:50%;
    background:transparent; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .dept-title-icon i { font-size:18px; color:var(--gold); }
  .dept-title-icon img.jck-icon { width:36px; height:36px; }
  .dept-arrow i { font-size:16px; color:var(--gold); transition:transform 0.3s ease; display:block; }
  .dept-body {
    display:none; padding:0 26px 26px; font-size:14px; line-height:1.85;
    color:var(--muted); background:var(--gold-pale); border-left:4px solid var(--gold);
  }
  .dept-body.open { display:block; animation:slideOpen 0.3s ease; }
  @keyframes slideOpen {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .dept-body ul { list-style:none; margin-top:10px; }
  .dept-body ul li { padding:4px 0 4px 22px; position:relative; }
  .dept-body ul li::before { content:''; position:absolute; left:4px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:0.6; }

  /* â”€â”€ VERSE BANNER â”€â”€ */
  .verse-banner { background:var(--dark); padding:60px 40px; text-align:center; position:relative; overflow:hidden; }
  .verse-banner::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet)); }
  .verse-banner blockquote { font-family:'Playfair Display',serif; font-size:clamp(17px,2.8vw,26px); color:var(--white); font-style:italic; max-width:780px; margin:0 auto 14px; line-height:1.65; }
  .verse-banner cite { color:var(--gold); font-size:13px; letter-spacing:2.5px; text-transform:uppercase; font-style:normal; font-family:'Lato',sans-serif; font-weight:700; }

  /* â”€â”€ CONTACT â”€â”€ */
  .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
  .contact-card {
    background:var(--white); border-radius:5px; padding:34px 34px 44px;
    box-shadow:0 2px 14px rgba(90,50,8,0.07); border-top:4px solid var(--gold);
    position:relative; overflow:hidden;
    background-image:radial-gradient(circle, rgba(232,146,26,0.07) 1px, transparent 1px);
    background-size:18px 18px;
  }
  .contact-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:10px;
    background-color:var(--gold);
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 13px, rgba(255,255,255,0.22) 13px, rgba(255,255,255,0.22) 14px),
      repeating-linear-gradient(0deg,  transparent 0, transparent 4px,  rgba(255,255,255,0.22) 4px,  rgba(255,255,255,0.22) 5px);
  }
  .contact-card h3 { font-family:'Playfair Display',serif; font-size:21px; color:var(--dark); margin-bottom:18px; }
  .contact-row { display:flex; gap:13px; margin-bottom:14px; align-items:flex-start; }
  .contact-icon-wrap {
    width:40px; height:40px; border-radius:50%; background:transparent;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .contact-icon-wrap i { font-size:16px; color:var(--gold); }
  .contact-icon-wrap img.jck-icon { width:40px; height:40px; }
  .contact-info { font-size:14px; line-height:1.72; color:var(--muted); padding-top:7px; }
  .contact-info strong { color:var(--dark); }

  /* â”€â”€ LIFE CHANGERS â”€â”€ */
  .lc-hero { background:linear-gradient(148deg,rgba(12,30,6,0.88) 0%,rgba(26,60,10,0.85) 45%,rgba(38,90,18,0.82) 100%), url('images/hero-bg.png') center/cover no-repeat; padding:96px 40px 76px; text-align:center; position:relative; overflow:hidden; }
  .lc-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 50% at 50% 50%, rgba(80,180,40,0.1) 0%, transparent 65%); animation:heroPulse 5s ease-in-out infinite; }
  .lc-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet)); }

  .lc-logo-ring { display:inline-block; margin-bottom:24px; }
  .lc-logo-ring img { width:200px; height:200px; border-radius:50%; border:3px solid #60C030; box-shadow:0 0 0 6px rgba(96,192,48,0.15), 0 6px 30px rgba(0,0,0,0.5); object-fit:contain; background:#000; animation:logoPulse 3s ease-in-out infinite; }

  .lc-badge { display:inline-block; background:rgba(96,192,48,0.14); border:1px solid rgba(96,192,48,0.38); color:#90E060; font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:20px; }
  .lc-hero h2 { font-family:'Playfair Display',serif; font-size:clamp(34px,5.5vw,68px); font-weight:900; color:var(--white); line-height:1.05; margin-bottom:12px; animation:slideDown 0.7s 0.2s both; }
  .lc-hero h2 em { color:#90E060; font-style:italic; }
  .lc-hero-sub { font-size:15px; color:rgba(255,255,255,0.58); max-width:560px; margin:0 auto 14px; line-height:1.75; animation:slideDown 0.7s 0.4s both; }
  .lc-npo { font-size:11px; color:rgba(255,255,255,0.3); letter-spacing:2.5px; font-weight:700; text-transform:uppercase; }

  .values-strip { background:var(--dark); padding:20px 40px; display:flex; justify-content:center; flex-wrap:wrap; }
  .value-chip { padding:7px 18px; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); border-right:1px solid rgba(232,146,26,0.22); transition:color 0.2s; }
  .value-chip:last-child { border-right:none; }
  .value-chip:hover { color:var(--gold-light); }

  .mission-block { background:var(--white); padding:68px 40px; }
  .mission-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .mission-text h3 { font-family:'Playfair Display',serif; font-size:30px; color:var(--dark); margin-bottom:14px; line-height:1.22; }
  .mission-text p { font-size:15px; line-height:1.88; color:var(--muted); }
  .vision-list { display:flex; flex-direction:column; gap:14px; }
  .vision-item { display:flex; gap:13px; align-items:flex-start; }
  .vision-dot { width:34px; height:34px; border-radius:50%; background:transparent; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:2px; transition:transform 0.28s ease; }
  .vision-dot:hover { transform:scale(1.15) rotate(-8deg); }
  .vision-dot i { font-size:17px; color:#90E060; }
  .vision-dot img.jck-icon { width:34px; height:34px; }
  .vision-item p { font-size:14px; line-height:1.72; color:var(--muted); padding-top:6px; }

  .projects-section { padding:80px 40px; max-width:1100px; margin:0 auto; }
  .projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(295px,1fr)); gap:26px; margin-top:46px; }
  .project-card { background:var(--white); border-radius:7px; overflow:hidden; box-shadow:0 2px 14px rgba(90,50,8,0.07); transition:transform 0.28s cubic-bezier(.22,.61,.36,1), box-shadow 0.28s ease; }
  .project-card:hover { transform:translateY(-6px); box-shadow:0 14px 40px rgba(90,50,8,0.16); }
  .project-thumb { height:90px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .project-thumb i { font-size:42px; color:rgba(255,255,255,0.85); transition:transform 0.4s cubic-bezier(.22,.61,.36,1); }
  .project-card:hover .project-thumb i { transform:scale(1.2) rotate(-5deg); }
  .project-body { padding:22px; }
  .project-body h4 { font-family:'Playfair Display',serif; font-size:19px; color:var(--dark); margin-bottom:8px; }
  .project-body p { font-size:13px; color:var(--muted); line-height:1.75; }
  .project-tag { display:inline-block; background:#E8F5E0; color:var(--lc-green); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:3px 9px; border-radius:3px; margin-bottom:8px; }

  .objectives-section { background:var(--dark); padding:78px 40px; }
  .objectives-inner { max-width:1100px; margin:0 auto; }
  .objectives-inner .section-title { color:var(--white); }
  .objectives-inner .section-label { color:#90E060; }
  .objectives-inner .divider { background:#90E060; }
  .objectives-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:38px; }
  .obj-item { background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.07); border-radius:5px; padding:20px 18px; transition:background 0.25s, border-color 0.25s, transform 0.28s; }
  .obj-item:hover { background:rgba(232,146,26,0.1); border-color:rgba(232,146,26,0.3); transform:translateY(-3px); }
  .obj-num { font-family:'Playfair Display',serif; font-size:34px; font-weight:900; color:rgba(232,146,26,0.2); line-height:1; margin-bottom:7px; }
  .obj-item p { font-size:13px; color:rgba(255,255,255,0.58); line-height:1.72; }

  .lc-contact { background:#EDF5E8; padding:68px 40px; }
  .lc-contact-inner { max-width:800px; margin:0 auto; text-align:center; }
  .lc-contact-inner .section-label { color:var(--lc-green); }
  .lc-contact-cards { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
  .lc-contact-card {
    background:var(--white); border-radius:7px; padding:26px 28px 36px; box-shadow:0 2px 12px rgba(40,80,20,0.08);
    text-align:left; min-width:180px; border-top:4px solid var(--lc-green);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    position:relative; overflow:hidden;
    background-image:radial-gradient(circle, rgba(46,104,24,0.06) 1px, transparent 1px);
    background-size:18px 18px;
  }
  .lc-contact-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:10px;
    background-color:var(--lc-green);
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 13px, rgba(255,255,255,0.22) 13px, rgba(255,255,255,0.22) 14px),
      repeating-linear-gradient(0deg,  transparent 0, transparent 4px,  rgba(255,255,255,0.22) 4px,  rgba(255,255,255,0.22) 5px);
  }
  .lc-contact-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(40,80,20,0.13); }
  .lc-contact-card .label { font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--lc-green); margin-bottom:7px; }
  .lc-contact-card .value { font-family:'Playfair Display',serif; font-size:15px; color:var(--dark); line-height:1.55; }

  .highlight-box { background:var(--gold-pale); border:1px solid rgba(232,146,26,0.28); border-left:5px solid var(--gold); border-radius:0 5px 5px 0; padding:20px; margin-top:18px; font-size:13px; color:var(--text); line-height:1.8; }
  .highlight-box h4 { font-family:'Playfair Display',serif; font-size:16px; color:var(--dark); margin-bottom:5px; }

  footer { background:var(--dark); padding:44px 40px; text-align:center; position:relative; }
  footer::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet)); }
  footer p { font-size:13px; color:rgba(255,255,255,0.3); line-height:1.85; }
  footer strong { color:var(--gold); }

  /* ── UTILITY CLASSES ── */
  .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
  .content-section { padding:72px 40px; max-width:1100px; margin:0 auto; }

  /* ── HAMBURGER TOGGLE ── */
  .nav-toggle {
    display:none; background:none; border:none;
    color:var(--gold-light); font-size:26px;
    cursor:pointer; padding:10px 8px; line-height:1; flex-shrink:0;
  }
  .nav-backdrop {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.55); z-index:98;
  }
  .nav-backdrop.open { display:block; }

  /* ── TABLET (max 960px) ── */
  @media (max-width:960px) {
    .about-grid { gap:28px; }
    .mission-inner { gap:36px; }
    .contact-grid { grid-template-columns:1fr; gap:20px; }
  }

  /* ── MOBILE (max 768px) ── */
  @media (max-width:768px) {
    .nav-toggle { display:block; }

    /* header */
    header { padding:0 16px; }
    .logo-img { width:44px; height:44px; }
    .logo-text h1 { font-size:13px; }
    .logo-text p { display:none; }

    /* slide-in nav panel */
    header nav {
      position:fixed; top:0; right:0; bottom:0;
      width:min(280px, 85vw);
      background:var(--dark); z-index:99;
      flex-direction:column; align-items:stretch; gap:0;
      padding:70px 0 40px; overflow-y:auto;
      transform:translateX(100%);
      transition:transform 0.3s cubic-bezier(.22,.61,.36,1);
      box-shadow:-6px 0 30px rgba(0,0,0,0.55);
    }
    header nav.open { transform:translateX(0); }
    header nav a {
      font-size:14px; padding:16px 24px; letter-spacing:2px;
      border-bottom:1px solid rgba(255,255,255,0.07);
      border-radius:0; white-space:normal;
    }
    header nav a.active {
      border-left:3px solid var(--gold); color:var(--gold-light);
    }

    /* hero */
    .hero { padding:60px 18px; min-height:75vh; }
    .hero-logo-wrap img { width:90px; height:90px; }
    .hero-cta {
      flex-direction:column; align-items:stretch;
      max-width:280px; margin-left:auto; margin-right:auto;
    }
    .hero-cta .btn-primary, .hero-cta .btn-outline { justify-content:center; }

    /* sections */
    .section { padding:48px 18px; }
    .verse-banner { padding:40px 18px; }
    .mission-block { padding:48px 18px; }
    .mission-inner { grid-template-columns:1fr; gap:24px; }
    .projects-section { padding:48px 18px; }
    .objectives-section { padding:48px 18px; }
    .lc-contact { padding:48px 18px; }
    .lc-hero { padding:55px 18px 50px; }
    footer { padding:32px 18px; }

    /* grids */
    .about-grid { grid-template-columns:1fr; gap:20px; }
    .contact-grid { grid-template-columns:1fr; gap:20px; }
    .content-section { padding:48px 18px; }
  }

  /* ── SMALL MOBILE (max 480px) ── */
  @media (max-width:480px) {
    .cards { grid-template-columns:1fr; }
    .lc-contact-cards { flex-direction:column; }
    .lc-contact-card { min-width:auto; width:100%; }
    .objectives-grid { grid-template-columns:1fr 1fr; }
    .projects-grid { grid-template-columns:1fr; }
  }

  /* ── LIFE CHANGERS SUB-SITE ── */
  .lc-site-header {
    background:#0C1E06;
    padding:0 40px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:100;
    box-shadow:0 4px 24px rgba(0,0,0,0.55);
  }
  .lc-site-logo { display:flex; align-items:center; gap:12px; padding:10px 0; }
  .lc-site-logo img { width:68px; height:68px; border-radius:50%; object-fit:contain; border:2px solid #60C030; background:#000; flex-shrink:0; }
  .lc-site-logo-text h1 { font-family:'Playfair Display',serif; font-size:15px; font-weight:700; color:#90E060; line-height:1.15; }
  .lc-site-logo-text p { font-size:8px; color:rgba(255,255,255,0.4); letter-spacing:3px; text-transform:uppercase; margin-top:1px; }
  .lc-site-nav { display:flex; gap:1px; align-items:center; flex-wrap:wrap; }
  .lc-site-nav a {
    color:rgba(255,255,255,0.5); font-family:'Lato',sans-serif; font-size:10px;
    font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:8px 9px; border-radius:3px; text-decoration:none;
    transition:all 0.22s; white-space:nowrap; border-bottom:2px solid transparent;
  }
  .lc-site-nav a:hover { color:#90E060; }
  .lc-site-nav a.active { color:#90E060; border-bottom-color:#60C030; }
  .lc-site-nav .back-link {
    color:rgba(255,255,255,0.3); border-left:1px solid rgba(255,255,255,0.1);
    margin-left:6px; padding-left:10px;
  }
  .lc-site-nav .back-link:hover { color:var(--gold-light); }

  /* outreach hero */
  .outreach-hero {
    background:linear-gradient(148deg,rgba(12,30,6,0.88) 0%,rgba(26,60,10,0.85) 45%,rgba(38,90,18,0.82) 100%), url('images/hero-bg.png') center/cover no-repeat;
    padding:80px 40px 70px; text-align:center; position:relative; overflow:hidden;
  }
  .outreach-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 50% at 50% 50%, rgba(80,180,40,0.1) 0%, transparent 65%); }
  .outreach-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet)); }
  .outreach-hero .hero-eyebrow { color:#90E060; }
  .outreach-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(30px,5vw,58px); font-weight:900; color:var(--white); line-height:1.1; margin-bottom:16px; position:relative; }
  .outreach-hero h1 em { color:#90E060; font-style:italic; }
  .outreach-hero .lead { font-size:15px; color:rgba(255,255,255,0.65); max-width:580px; margin:0 auto; line-height:1.78; position:relative; }

  /* outreach content */
  .outreach-content { padding:72px 40px; max-width:1100px; margin:0 auto; }
  .outreach-grid { display:grid; grid-template-columns:3fr 2fr; gap:52px; align-items:start; }
  .outreach-body p { font-size:15px; line-height:1.92; color:var(--muted); margin-bottom:18px; }
  .outreach-body h3 { font-family:'Playfair Display',serif; font-size:22px; color:var(--dark); margin:32px 0 12px; line-height:1.2; }
  .outreach-body h3:first-child { margin-top:0; }
  .outreach-body ul { list-style:none; margin:0 0 20px; }
  .outreach-body ul li { padding:6px 0 6px 24px; position:relative; font-size:14px; color:var(--muted); line-height:1.7; }
  .outreach-body ul li::before { content:''; position:absolute; left:2px; top:14px; width:8px; height:8px; border-radius:50%; background:var(--lc-green); opacity:0.7; }

  /* stat cards */
  .stat-card {
    background:var(--white); border-radius:7px; padding:26px 24px 36px;
    box-shadow:0 2px 14px rgba(40,80,20,0.08); border-top:4px solid var(--lc-green); margin-bottom:16px;
    position:relative; overflow:hidden;
    background-image:radial-gradient(circle, rgba(46,104,24,0.06) 1px, transparent 1px);
    background-size:18px 18px;
  }
  .stat-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:10px;
    background-color:var(--lc-green);
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 13px, rgba(255,255,255,0.22) 13px, rgba(255,255,255,0.22) 14px),
      repeating-linear-gradient(0deg,  transparent 0, transparent 4px,  rgba(255,255,255,0.22) 4px,  rgba(255,255,255,0.22) 5px);
  }
  .stat-num { font-family:'Playfair Display',serif; font-size:38px; font-weight:900; color:var(--lc-green); line-height:1; margin-bottom:6px; }
  .stat-num img.jck-icon { width:52px; height:52px; }
  .outreach-card-thumb img.jck-icon { width:44px; height:44px; }
  .stat-label { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
  .stat-note { font-size:13px; color:var(--muted); line-height:1.6; margin-top:8px; }

  /* get involved strip */
  .get-involved { background:#EDF5E8; padding:64px 40px; }
  .get-involved-inner { max-width:780px; margin:0 auto; text-align:center; }
  .get-involved h2 { font-family:'Playfair Display',serif; font-size:30px; color:var(--dark); margin-bottom:12px; }
  .get-involved p { font-size:15px; color:var(--muted); line-height:1.8; margin-bottom:28px; }
  .gi-chips { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .gi-chip { background:var(--white); border:1px solid rgba(46,104,24,0.3); border-radius:50px; padding:10px 22px; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--lc-green); }

  /* lc home outreach cards */
  .outreach-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
  .outreach-card {
    background:var(--white); border-radius:7px; overflow:hidden;
    box-shadow:0 2px 14px rgba(40,80,20,0.07);
    transition:transform 0.28s cubic-bezier(.22,.61,.36,1), box-shadow 0.28s ease;
    text-decoration:none; color:inherit; display:block;
  }
  .outreach-card:hover { transform:translateY(-6px); box-shadow:0 14px 36px rgba(40,80,20,0.15); }
  .outreach-card::after {
    content:'';
    display:block;
    height:10px;
    background-color:var(--lc-green);
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 13px, rgba(255,255,255,0.22) 13px, rgba(255,255,255,0.22) 14px),
      repeating-linear-gradient(0deg,  transparent 0, transparent 4px,  rgba(255,255,255,0.22) 4px,  rgba(255,255,255,0.22) 5px);
  }
  .outreach-card-thumb { height:80px; display:flex; align-items:center; justify-content:center; }
  .outreach-card-thumb i { font-size:38px; color:rgba(255,255,255,0.85); transition:transform 0.4s ease; }
  .outreach-card:hover .outreach-card-thumb i { transform:scale(1.2) rotate(-5deg); }
  .outreach-card-body { padding:20px; background-image:radial-gradient(circle, rgba(46,104,24,0.06) 1px, transparent 1px); background-size:18px 18px; }
  .outreach-card-tag { display:inline-block; background:#E8F5E0; color:var(--lc-green); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:3px 9px; border-radius:3px; margin-bottom:8px; }
  .outreach-card-body h3 { font-family:'Playfair Display',serif; font-size:17px; color:var(--dark); margin-bottom:6px; }
  .outreach-card-body p { font-size:13px; color:var(--muted); line-height:1.7; }

  /* lc footer */
  .lc-footer { background:#0C1E06; padding:44px 40px; text-align:center; position:relative; }
  .lc-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet)); }
  .lc-footer p { font-size:13px; color:rgba(255,255,255,0.3); line-height:1.85; }
  .lc-footer strong { color:#90E060; }
  .lc-footer a { color:rgba(255,255,255,0.25); text-decoration:none; font-size:12px; }
  .lc-footer a:hover { color:var(--gold-light); }

  /* ── LC SUB-SITE MOBILE (hamburger at 960px — 9 links need space) ── */
  @media (max-width:960px) {
    .lc-site-header { padding:0 16px; }
    .lc-site-logo img { width:52px; height:52px; }
    .lc-site-logo-text h1 { font-size:13px; }
    .lc-site-logo-text p { display:none; }
    .lc-site-header .nav-toggle { display:block; color:#90E060; }

    .lc-site-nav {
      position:fixed; top:0; right:0; bottom:0;
      width:min(300px, 85vw);
      background:#0C1E06; z-index:99;
      flex-direction:column; align-items:stretch; gap:0;
      padding:70px 0 40px; overflow-y:auto;
      transform:translateX(100%);
      transition:transform 0.3s cubic-bezier(.22,.61,.36,1);
      box-shadow:-6px 0 30px rgba(0,0,0,0.65); flex-wrap:nowrap;
    }
    .lc-site-nav.open { transform:translateX(0); }
    .lc-site-nav a {
      font-size:14px; padding:16px 24px; letter-spacing:1.5px;
      border-bottom:1px solid rgba(255,255,255,0.07);
      border-radius:0; white-space:normal;
    }
    .lc-site-nav a.active {
      border-left:3px solid #60C030; color:#90E060;
    }
    .lc-site-nav .back-link {
      border-left:none; margin-left:0; padding-left:24px;
      margin-top:8px; border-top:1px solid rgba(255,255,255,0.1);
    }

    .outreach-hero { padding:50px 18px 50px; }
    .outreach-content { padding:40px 18px; }
    .outreach-grid { grid-template-columns:1fr; gap:28px; }
    .get-involved { padding:44px 18px; }
    .lc-footer { padding:32px 18px; }
    .outreach-cards { grid-template-columns:1fr 1fr; }
  }

  @media (max-width:560px) {
    .outreach-cards { grid-template-columns:1fr; }
    .gi-chips { flex-direction:column; align-items:center; }
  }

  /* ── COUNSELLING FORM ── */
  .counsel-header { margin-bottom:36px; }
  .counsel-card {
    background:var(--white); border-radius:5px; padding:40px 44px 50px;
    box-shadow:0 2px 14px rgba(90,50,8,0.07); border-top:4px solid var(--gold);
    max-width:720px; margin:0 auto; position:relative; overflow:hidden;
    background-image:radial-gradient(circle, rgba(232,146,26,0.07) 1px, transparent 1px);
    background-size:18px 18px;
  }
  .counsel-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:10px;
    background-color:var(--gold);
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 13px, rgba(255,255,255,0.22) 13px, rgba(255,255,255,0.22) 14px),
      repeating-linear-gradient(0deg,  transparent 0, transparent 4px,  rgba(255,255,255,0.22) 4px,  rgba(255,255,255,0.22) 5px);
  }
  .form-group { margin-bottom:20px; }
  .form-label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--dark); margin-bottom:7px; }
  .form-label .req { color:var(--gold); }
  .form-input {
    width:100%; padding:12px 16px;
    border:1.5px solid rgba(90,50,8,0.18); border-radius:3px;
    background:var(--cream-light); font-family:'Lato',sans-serif;
    font-size:14px; color:var(--text);
    transition:border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance:none; appearance:none;
  }
  .form-input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,146,26,0.12); }
  .form-input::placeholder { color:var(--muted); opacity:0.7; }
  textarea.form-input { resize:vertical; min-height:100px; }
  select.form-input {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E8921A' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
  }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .form-error { background:#fdecea; border:1px solid #e57373; border-radius:3px; color:#c62828; font-size:13px; padding:10px 14px; margin-bottom:16px; }
  .counsel-btn { width:100%; justify-content:center; font-size:13px; padding:16px; margin-top:8px; }

  @media (max-width:640px) {
    .counsel-card { padding:28px 20px 44px; }
    .form-row { grid-template-columns:1fr; gap:0; }
  }
