/* Sanctuary pages. Fraunces + Inter, leave-behind palette. No serif fallback. */
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/fraunces-700.woff2") format("woff2");
}
@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/fraunces-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}

.cav {
  margin: 0;
  background: #f7f4ef;
  color: #0f1b3d;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.cav *,
.cav *::before,
.cav *::after { box-sizing: border-box; }
.cav img { max-width: 100%; }
html:has(body.cav),
html:has(.cav) { scroll-behavior: smooth; }
.cav a { color: #1d4fd8; }
.cav p { color: #0f1b3d; }
.cav h1,
.cav h2,
.cav h3,
.cav .proof { font-family: Fraunces, sans-serif; font-weight: 700; }

.cav .wrap {
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto;
}
.cav .topnav {
  background: #fff;
  border-bottom: 1px solid #e4dccf;
}
.cav .topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: 64px;
  flex-wrap: wrap;
}
.cav .topnav .brand,
.cav .topnav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #0f1b3d;
  font-weight: 700;
  text-decoration: none;
}
.cav .topnav .brand { font-size: 18px; }
.cav .topnav nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.cav .topnav nav a { font-size: 16px; font-weight: 600; }
.cav .section { padding: 3.25rem 0 1rem; }
.cav .section.after-band { padding-top: 0; }
.cav .hero-greet {
  margin: 0 0 0.55rem;
  color: #f4b63f;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: none;
}

.cav .hero {
  position: relative;
  height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0f1b3d;
  color: #fff;
  overflow: hidden;
}
.cav .hero picture,
.cav .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.cav .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 27, 61, 0.1) 0%, rgba(15, 27, 61, 0.28) 46%, rgba(15, 27, 61, 0.6) 100%);
}
.cav .hero-inner {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto 1.5rem;
}
.cav h1 {
  margin: 0 0 0.6rem;
  color: #fff;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.cav .lede {
  margin: 0 0 1rem;
  color: #f4b63f;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}
.cav .btn {
  display: inline-block;
  max-width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.15rem;
  border: 0;
  border-radius: 8px;
  background: #1d4fd8;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
.cav .local-h2 {
  margin: 0 0 0.4rem;
  color: #0f1b3d;
  font-size: 28px;
  line-height: 1.2;
}
.cav .facts {
  margin: 0 0 0.35rem;
  font-size: 16px;
}
.cav .block { margin-top: 3.25rem; }
.cav .block h2,
.cav .story h2 {
  margin: 0 0 0.6rem;
  color: #1d4fd8;
  font-size: 28px;
  line-height: 1.2;
}
.cav .block p { margin: 0; font-size: 18px; color: #0f1b3d; max-width: 42rem; }
.cav .story {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.25rem;
}
.cav .story h2 {
  margin: 0 0 0.6rem;
  color: #1d4fd8;
  font-size: 28px;
  line-height: 1.2;
}
.cav .story p,
.cav .benefits p {
  margin: 0;
  color: #0f1b3d;
  font-size: 18px;
}
.cav .benefits > .eyebrow { grid-column: 1 / -1; }
.cav .benefits > .eyebrow,
.cav .uug > p.eyebrow,
.cav .also-grid .eyebrow {
  margin: 0;
  color: #1d4fd8;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.cav .benefits {
  display: grid;
  gap: 1.75rem;
  margin-top: 3.25rem;
}
.cav .benefits article {
  border-top: 3px solid #1d4fd8;
  padding-top: 0.7rem;
  background: transparent;
}
.cav .benefits h3 {
  margin: 0 0 0.35rem;
  font-size: 24px;
  line-height: 1.2;
}
.cav .who {
  margin: 1.25rem 0 0;
  font-size: 16px;
  color: #0f1b3d;
}
.cav .who strong { color: #0f1b3d; }
.cav .proof-block { margin-top: 3.25rem; }
.cav .proof {
  margin: 0 0 1.5rem;
  padding: 0 0 0 1rem;
  border-left: 3px solid #f4b63f;
  color: #0f1b3d;
}
.cav .proof img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 0.9rem;
}
.cav .proof blockquote,
.cav .proof p {
  margin: 0;
  color: #0f1b3d;
  font-family: Fraunces, sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
}
.cav .proof cite {
  display: inline;
  margin-left: 0.4rem;
  color: #64748b;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.cav .cta {
  margin-top: 3.25rem;
  padding: 3rem 0 3.25rem;
  background: #1d4fd8;
  color: #fff;
}
.cav .cta h2 {
  margin: 0 0 0.4rem;
  color: #fff;
  font-size: 32px;
  line-height: 1.15;
}
.cav .thanks {
  outline: none;
}
.cav .thanks h2 {
  margin: 0 0 0.65rem;
  color: #fff;
  font-family: Fraunces, sans-serif;
  font-size: 32px;
  line-height: 1.15;
}
.cav .cta .thanks p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  max-width: 40rem;
}
.cav .thanks .thanks-sign {
  margin-top: 0.85rem;
  color: #dbeafe;
  font-size: 16px;
}
.cav .cta-sub {
  margin: 0 0 1rem;
  color: #dbeafe;
  font-size: 18px;
}
.cav .midband {
  margin-top: 2.5rem;
  padding: 2.25rem 0;
  background: #1d4fd8;
  color: #fff;
}
.cav .midband-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.cav .midband h2 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1.15;
}
.cav .midband h2 span { display: block; }
.cav .midband .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  padding: 0 1.25rem;
  background: #fff;
  color: #1d4fd8;
  line-height: 1;
  white-space: nowrap;
}
.cav .cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  min-width: 240px;
  padding: 0 2rem;
  background: #fff;
  color: #1d4fd8;
  line-height: 1;
}
.cav .fields {
  display: grid;
  gap: 0.75rem;
}
.cav label,
.cav .cta label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.cav label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0;
  font-weight: 500;
}
.cav input,
.cav textarea,
.cav select {
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #0f1b3d;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.cav textarea {
  height: auto;
  min-height: 96px;
  padding: 0.75rem;
}
.cav label.check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}
.cav .fine { margin: 0; color: #dbeafe; font-size: 16px; font-weight: 400; }
.cav .span-2 { grid-column: 1 / -1; }
.cav .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cav form { position: relative; }
.cav .ok,
.cav .err {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #fff;
  color: #0f1b3d;
  font-size: 16px;
}
.cav .eyebrow,
.cav .name {
  margin: 0;
  color: #1d4fd8;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.cav .also,
.cav .uug { margin-top: 3.25rem; }
.cav .uug h2 {
  margin: 0.35rem 0 0.8rem;
  color: #0f1b3d;
  font-size: 28px;
  line-height: 1.2;
}
.cav .uug > p { margin: 0 0 1.25rem; color: #0f1b3d; font-size: 18px; max-width: 42rem; }
.cav .also-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.8rem;
}
.cav .also-grid h3,
.cav .also h3 {
  margin: 0.35rem 0 0.5rem;
  color: #0f1b3d;
  font-family: Fraunces, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.cav .also-grid article p:not(.eyebrow),
.cav .also article p:not(.eyebrow) {
  margin: 0 0 0.85rem;
  color: #0f1b3d;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.cav .learn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #1d4fd8;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.cav .learn:hover { text-decoration: underline; }
.cav .serve { margin-top: 2rem; }
.cav .serve > h2 {
  margin: 0 0 0.75rem;
  font-size: 28px;
  line-height: 1.2;
}
.cav .topic-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.cav .seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.cav .seg label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid #1d4fd8;
  border-radius: 999px;
  background: transparent;
  color: #1d4fd8;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.cav .serve .panel { display: none; }
.cav .topic-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.cav .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cav .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid #0f1b3d;
  border-radius: 999px;
  background: transparent;
  color: #0f1b3d;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.cav .chip:hover,
.cav .chip[aria-current="page"] {
  background: #1d4fd8;
  border-color: #1d4fd8;
  color: #fff;
}
.cav .foot {
  margin-top: 1.5rem;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid #e4dccf;
  color: #64748b;
  font-size: 16px;
}
.cav .foot p { margin: 0; color: #64748b; }

#serve-church-livestreaming:checked ~ .seg label[for="serve-church-livestreaming"],
#serve-sanctuary-sound-lighting:checked ~ .seg label[for="serve-sanctuary-sound-lighting"],
#serve-new-building-av:checked ~ .seg label[for="serve-new-building-av"] {
  background: #1d4fd8;
  color: #fff;
}
#serve-church-livestreaming:checked ~ .panels .panel-church-livestreaming,
#serve-sanctuary-sound-lighting:checked ~ .panels .panel-sanctuary-sound-lighting,
#serve-new-building-av:checked ~ .panels .panel-new-building-av {
  display: block;
}

@media (min-width: 800px) {
  .cav .fields { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .cav .midband-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .cav .midband h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.cav),
  html:has(.cav) { scroll-behavior: auto; }
}
@media (max-width: 480px) {
  .cav .hero::after {
    background: linear-gradient(180deg, rgba(15, 27, 61, 0.08) 0%, rgba(15, 27, 61, 0.22) 30%, rgba(15, 27, 61, 0.75) 58%, rgba(15, 27, 61, 0.75) 100%);
  }
}
@media (min-width: 1280px) {
  .cav .benefits,
  .cav .also-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.75rem; }
  .cav .also-grid article {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .cav .also-grid .learn { margin-top: auto; }
}
@media (min-width: 960px) {
  .cav .hero { height: 70vh; }
  .cav h1 { font-size: 56px; }
  .cav .local-h2,
  .cav .serve > h2 { font-size: 36px; }
  .cav .cta h2 { font-size: 40px; }
}

/* Cross-links to the matching United Under God page. */
.cav .room-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.cav .how .learn { margin-top: 0.75rem; }