/* ===================================================================
   Gospel Sound Worship Center — template
   Palette: burnt orange + shades of blue
   =================================================================== */
:root{
  /* Burnt orange */
  --orange:#c2410c;
  --orange-bright:#ea580c;
  --orange-soft:#ffedd5;
  /* Blues */
  --sky:#0ea5e9;
  --sky-light:#38bdf8;
  --sky-soft:#e0f2fe;
  --sky-tint:#f0f9ff;
  --blue-deep:#0c4a6e;
  --blue-deeper:#082f49;
  /* Neutrals */
  --ink:#0f172a;
  --body:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --white:#ffffff;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 40px -18px rgba(8,47,73,.35);
  --shadow-sm:0 8px 24px -12px rgba(8,47,73,.30);
  --wrap:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--body); background:var(--white);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:"Fraunces",Georgia,serif; color:var(--ink); line-height:1.15; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Plus Jakarta Sans"; font-weight:700; font-size:.98rem;
  padding:14px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover{ transform:translateY(-3px); }
.btn--orange{ background:var(--orange); color:#fff; box-shadow:0 10px 22px -10px rgba(194,65,12,.7); }
.btn--orange:hover{ background:var(--orange-bright); }
.btn--blue{ background:var(--sky); color:#fff; box-shadow:0 10px 22px -10px rgba(14,165,233,.7); }
.btn--blue:hover{ background:var(--sky-light); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ padding:9px 20px; font-size:.9rem; }
.btn--full{ width:100%; justify-content:center; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--blue-deeper); color:#cbe6f5; font-size:.82rem; }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; padding-top:9px; padding-bottom:9px; }
.topbar__links a{ margin-left:18px; color:#fff; font-weight:600; }
.topbar__links a:hover{ color:var(--orange-bright); }

/* ---------- Nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s; }
.nav.scrolled{ box-shadow:var(--shadow-sm); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:46px; height:46px; border-radius:14px; flex:none;
  display:grid; place-items:center; font-family:"Fraunces"; font-weight:700; color:#fff; font-size:1.15rem;
  background:linear-gradient(135deg,var(--orange),var(--orange-bright));
  box-shadow:0 8px 18px -8px rgba(194,65,12,.7);
}
.brand__text{ font-family:"Fraunces"; font-weight:700; font-size:1.2rem; color:var(--ink); line-height:1.05; display:flex; flex-direction:column; }
.brand__text small{ font-family:"Plus Jakarta Sans"; font-weight:600; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sky); }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{ font-weight:600; font-size:.96rem; color:var(--ink); transition:color .2s; }
.nav__links a:not(.btn):hover{ color:var(--orange); }
.nav__links a:not(.btn){ position:relative; }
.nav__links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--orange); transition:width .25s var(--ease); }
.nav__links a:not(.btn):hover::after{ width:100%; }
.nav__toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav__toggle span{ width:26px; height:3px; background:var(--ink); border-radius:2px; transition:.3s; }

/* ---------- Hero ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; padding:96px 0 130px; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2;
  background:radial-gradient(120% 120% at 80% 0%, var(--sky) 0%, var(--blue-deep) 45%, var(--blue-deeper) 100%);
}
.hero::before{ content:""; position:absolute; z-index:-1; width:520px; height:520px; right:-120px; top:-140px; border-radius:50%;
  background:radial-gradient(circle, rgba(234,88,12,.55), transparent 65%); }
.hero::after{ content:""; position:absolute; z-index:-1; width:340px; height:340px; left:-120px; bottom:40px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.45), transparent 65%); }
.hero__inner{ position:relative; display:grid; grid-template-columns:1.05fr .8fr; gap:54px; align-items:center; }
.hero__content{ text-align:left; }
.hero__portrait{ position:relative; justify-self:end; max-width:420px; width:100%; }
.hero__portrait img{ position:relative; z-index:1; width:100%; display:block; border-radius:22px; box-shadow:0 34px 70px -24px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.16); }
.hero__portrait::before{ content:""; position:absolute; right:-16px; bottom:-16px; width:72%; height:72%; border-radius:22px; background:linear-gradient(135deg,var(--orange),var(--orange-bright)); z-index:0; }
.hero__portrait::after{ content:""; position:absolute; left:-18px; top:-18px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle, rgba(56,189,248,.55), transparent 70%); z-index:0; }
.eyebrow{ display:inline-block; font-family:"Plus Jakarta Sans"; font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:16px; }
.eyebrow--light{ color:var(--orange-bright); background:rgba(255,255,255,.12); padding:6px 16px; border-radius:999px; }
.hero__title{ font-size:clamp(2.4rem,5.5vw,4rem); color:#fff; font-weight:700; letter-spacing:-.5px; }
.hero__title .accent{ color:var(--orange-bright); }
.hero__sub{ font-size:1.18rem; color:#dbeafe; max-width:560px; margin:20px 0 0; }
.hero__cta{ display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; margin-top:34px; }
.hero__times{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:760px; margin:56px auto 0; }
.timecard{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm); padding:20px 14px; backdrop-filter:blur(4px); transition:transform .25s var(--ease), background .25s; }
.timecard:hover{ transform:translateY(-5px); background:rgba(255,255,255,.16); }
.timecard strong{ display:block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-bright); }
.timecard span{ display:block; font-family:"Fraunces"; font-size:1.6rem; font-weight:700; color:#fff; margin:4px 0 2px; }
.timecard small{ color:#bae6fd; font-size:.78rem; }
.hero__wave{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.hero__wave svg{ width:100%; height:80px; }
.hero__wave path{ fill:var(--white); }

/* ---------- Section scaffolding ---------- */
.section{ padding:92px 0; }
.section--tint{ background:var(--sky-tint); }
.section--deep{ background:linear-gradient(160deg,var(--blue-deep),var(--blue-deeper)); color:#cbe6f5; }
.section__head{ max-width:640px; margin-bottom:48px; }
.section__head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section__title{ font-size:clamp(1.9rem,3.5vw,2.7rem); font-weight:700; letter-spacing:-.5px; }
.section__title--light{ color:#fff; }
.section__intro{ font-size:1.12rem; color:var(--muted); margin-top:12px; }
.section__intro--light{ color:#bae6fd; }
.lead{ font-size:1.12rem; margin:18px 0; }

.grid{ display:grid; gap:28px; }
.grid--2{ grid-template-columns:1fr 1fr; align-items:center; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- About ---------- */
.about__art{ position:relative; }
.art-frame{ aspect-ratio:4/3; border-radius:var(--radius); display:grid; place-items:center; box-shadow:var(--shadow); }
.art-frame--blue{ background:radial-gradient(130% 130% at 20% 10%, var(--sky-light), var(--blue-deep)); }
.art-frame__icon{ font-size:5rem; color:rgba(255,255,255,.9); }
.art-badge{ position:absolute; right:-14px; bottom:-22px; background:#fff; border-radius:var(--radius-sm); padding:16px 22px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; border-left:5px solid var(--orange); }
.art-badge strong{ font-family:"Fraunces"; font-size:2rem; color:var(--orange); }
.art-badge span{ font-size:.82rem; color:var(--muted); line-height:1.3; }
.checklist{ list-style:none; margin:18px 0 24px; }
.checklist li{ position:relative; padding-left:34px; margin-bottom:12px; font-weight:500; color:var(--ink); }
.checklist li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:24px; height:24px; border-radius:50%; background:var(--orange-soft); color:var(--orange); font-weight:800; font-size:.85rem; display:grid; place-items:center; }
.link-arrow{ font-weight:700; color:var(--orange); }
.link-arrow:hover{ color:var(--orange-bright); }

/* ---------- Beliefs ---------- */
.belief{ background:#fff; border-radius:var(--radius); padding:30px 24px; text-align:center; border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s; }
.belief:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.belief__icon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:1.7rem; margin:0 auto 18px; }
.icon--orange{ background:var(--orange-soft); }
.icon--blue{ background:var(--sky-soft); }
.belief h3{ font-size:1.2rem; margin-bottom:8px; }
.belief p{ font-size:.95rem; color:var(--muted); }

/* ---------- Cards / Ministries ---------- */
.card{ background:#fff; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.ministry__top{ height:130px; display:grid; place-items:center; font-size:3rem; }
.ministry__top--blue{ background:radial-gradient(120% 120% at 30% 20%, var(--sky-light), var(--blue-deep)); }
.ministry__top--orange{ background:radial-gradient(120% 120% at 30% 20%, var(--orange-bright), var(--orange)); }
.card__body{ padding:26px 24px; }
.card__body h3{ font-size:1.35rem; margin:6px 0 10px; }
.card__body p{ color:var(--muted); margin-bottom:14px; }
.tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); background:var(--orange-soft); padding:4px 12px; border-radius:999px; }
.ministry--feature{ outline:2px solid var(--orange); outline-offset:-2px; }

/* ---------- Leadership ---------- */
.leader{ text-align:center; }
.leader__avatar{ width:112px; height:112px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; font-family:"Fraunces"; font-weight:700; font-size:2.1rem; color:#fff; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); border:4px solid rgba(255,255,255,.15); }
.a-orange{ background:linear-gradient(135deg,var(--orange-bright),var(--orange)); }
.a-blue{ background:linear-gradient(135deg,var(--sky-light),var(--blue-deep)); }
.leader__avatar--photo{ background:none; padding:0; overflow:hidden; }
.leader__avatar--photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.leader h3{ font-size:1.18rem; color:#fff; }
.leader span{ font-size:.9rem; color:var(--orange-bright); font-weight:600; }

/* ---------- Watch ---------- */
.watch__player .player{ position:relative; aspect-ratio:16/9; border-radius:var(--radius); display:grid; place-items:center; gap:14px; color:#fff; box-shadow:var(--shadow);
  background:radial-gradient(130% 130% at 70% 20%, var(--sky), var(--blue-deeper)); }
.player__btn{ width:84px; height:84px; border-radius:50%; background:var(--orange); display:grid; place-items:center; font-size:1.8rem; padding-left:6px; box-shadow:0 12px 30px -8px rgba(194,65,12,.8); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(234,88,12,.5);} 50%{ box-shadow:0 0 0 22px rgba(234,88,12,0);} }
.player__label{ font-weight:600; font-size:.95rem; }

/* ---------- Give ---------- */
.give{ background:radial-gradient(120% 120% at 50% 0%, var(--orange-bright), var(--orange) 55%, #9a3412 100%); color:#fff; text-align:center; }
.give__inner{ max-width:720px; margin:0 auto; }
.center-cta{ justify-content:center; }

/* ---------- Contact / Form ---------- */
.contact__list{ list-style:none; margin:22px 0; }
.contact__list li{ display:flex; align-items:center; gap:12px; margin-bottom:12px; font-weight:500; color:var(--ink); }
.ci{ width:38px; height:38px; border-radius:10px; background:var(--sky-soft); display:grid; place-items:center; }
.socials{ display:flex; gap:12px; margin-top:8px; }
.socials a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--blue-deep); color:#fff; font-weight:700; transition:transform .2s, background .2s; }
.socials a:hover{ transform:translateY(-4px); background:var(--orange); }
.form{ padding:32px; }
.form h3{ font-size:1.4rem; margin-bottom:18px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:14px; }
.form input,.form textarea{ width:100%; margin-top:6px; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; font:inherit; color:var(--ink); background:var(--sky-tint); transition:border .2s, box-shadow .2s; }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 4px var(--orange-soft); background:#fff; }
.form__note{ margin-top:14px; text-align:center; font-weight:700; color:var(--orange); }

/* ---------- Footer ---------- */
.footer{ background:var(--blue-deeper); color:#9fc6dd; padding:64px 0 0; }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; }
.brand--light .brand__text{ color:#fff; }
.footer__brand p{ margin-top:16px; font-size:.92rem; max-width:280px; }
.footer__col h4{ color:#fff; font-size:1rem; margin-bottom:14px; font-family:"Plus Jakarta Sans"; font-weight:700; }
.footer__col a{ display:block; margin-bottom:9px; font-size:.92rem; transition:color .2s; }
.footer__col a:hover{ color:var(--orange-bright); }
.footer__col p{ font-size:.92rem; line-height:1.9; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0; }
.footer__bar-inner{ display:flex; justify-content:space-between; font-size:.82rem; color:#6f9ab4; }
.footer__bar-inner a{ color:#fff; font-weight:600; }
.footer__bar-inner a:hover{ color:var(--orange-bright); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:1fr; }
  .grid--2{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .about__art{ order:-1; }
  .hero__inner{ grid-template-columns:1fr; gap:38px; }
  .hero__content{ text-align:center; }
  .hero__sub{ margin-left:auto; margin-right:auto; }
  .hero__cta{ justify-content:center; }
  .hero__portrait{ justify-self:center; max-width:320px; }
}
@media (max-width:680px){
  .topbar{ display:none; }
  .nav__links{ position:fixed; inset:72px 0 auto 0; flex-direction:column; background:#fff; padding:24px; gap:18px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .35s var(--ease); }
  .nav__links.open{ transform:none; }
  .nav__toggle{ display:flex; }
  .hero__times{ grid-template-columns:1fr; max-width:320px; }
  .form__row{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
}