@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --color-neutral-0: #fefcfa;
  --color-neutral-50: #fbf8f4;
  --color-neutral-100: #f8f3ee;
  --color-neutral-200: #f0e8e1;
  --color-neutral-300: #e8ddd5;
  --color-neutral-500: #9a8a89;
  --color-neutral-700: #523f43;
  --color-neutral-900: #120309;
  --color-love-100: #fcdad0;
  --color-love-200: #f9b4a1;
  --color-love-500: #f04414;
  --color-love-600: #932709;
  --color-peace-100: #b1fdd8;
  --color-peace-200: #63fab1;
  --color-peace-500: #036837;
  --color-peace-600: #023e21;
  --color-joy-100: #fef2d3;
  --color-joy-200: #fde5a7;
  --color-joy-500: #fbbd23;
  --color-joy-700: #705102;
  --color-hope-100: #cde7ff;
  --color-hope-200: #9bcfff;
  --color-hope-300: #69b7ff;
  --color-hope-500: #0586ff;
  --color-hope-700: #003668;
  --color-faith-100: #e4cbf2;
  --color-faith-200: #c997e5;
  --color-faith-500: #6c2593;
  --color-faith-600: #411658;
  --font-sans: "Geist", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius-pill: 999px;
  --page-gutter: clamp(20px, 2.6vw, 40px);
  --headline-size: clamp(64px, 8.18vw, 126px);
  --headline-media: clamp(68px, 6.9vw, 106px);
  --headline-media-wide: clamp(121px, 12.27vw, 188px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-neutral-200);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--color-neutral-900);
  background: var(--color-neutral-200);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input {
  font: inherit;
}

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

button {
  color: inherit;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  color: var(--color-neutral-0);
  background: var(--color-neutral-900);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform 160ms var(--ease-out);
}

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

.site-shell {
  position: relative;
  min-height: calc(100dvh - 16px);
  margin: 8px;
  overflow: clip;
  border: 1px solid var(--color-neutral-300);
  border-radius: 16px;
  background: var(--color-neutral-0);
}

.site-header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 88px;
  padding-inline: var(--page-gutter);
  border-bottom: 0.5px solid var(--color-neutral-200);
  background: rgb(254 252 250 / 56%);
  backdrop-filter: blur(8px);
}

.brand-mark {
  display: inline-flex;
  width: max-content;
  align-items: center;
  color: var(--color-neutral-900);
  transition: transform 160ms var(--ease-out), color 160ms ease;
}

.brand-mark img {
  display: block;
  width: 26px;
  height: 44px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.primary-nav a {
  position: relative;
  padding-block: 10px;
  color: var(--color-neutral-900);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms var(--ease-out);
}

.header-actions {
  display: flex;
  justify-content: flex-end;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 600;
  line-height: 20px;
  transition:
    transform 160ms var(--ease-out),
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.button:focus-visible,
.people-avatar:focus-visible,
.suggested-questions button:focus-visible,
.primary-nav a:focus-visible,
.brand-mark:focus-visible {
  outline: 3px solid var(--color-hope-300);
  outline-offset: 4px;
}

.button:active,
.people-avatar:active {
  transform: scale(0.97);
}

.ask-trigger {
  position: relative;
  padding: 13px 20px;
  color: var(--color-neutral-0);
  background: var(--color-hope-500);
  font-size: 14px;
}

.ask-trigger::after {
  position: absolute;
  inset: -4px;
  border: 2px solid rgb(5 134 255 / 52%);
  border-radius: inherit;
  box-shadow: 0 0 0 4px rgb(5 134 255 / 10%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

.js body.is-ready .ask-trigger::after {
  animation: ask-attention-pulse 4000ms var(--ease-out) 2200ms infinite;
}

.ask-trigger:focus-visible::after,
.ask-trigger[aria-expanded="true"]::after {
  animation: none;
}

.ask-trigger svg {
  flex: 0 0 auto;
}

@keyframes ask-attention-pulse {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  4% {
    opacity: 0.58;
  }

  30%,
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: calc(100dvh - 18px);
  flex-direction: column;
  gap: clamp(28px, 3.2vw, 48px);
  overflow: clip;
  padding: clamp(112px, 9.35vw, 144px) var(--page-gutter) clamp(52px, 5.2vw, 80px);
  background: var(--color-neutral-0);
}

.ring-field {
  position: absolute;
  z-index: 0;
  top: -28vw;
  left: -15vw;
  width: max(130vw, 1120px);
  aspect-ratio: 2000 / 1700;
  opacity: 0.24;
  pointer-events: none;
  transform: rotate(-8deg);
  transform-origin: top left;
}

.ring-field span {
  position: absolute;
  border: 1px solid var(--color-neutral-500);
  border-radius: 50%;
}

.ring-field span:nth-child(1) { inset: 0; }
.ring-field span:nth-child(2) { inset: clamp(38px, 4.55vw, 70px); }
.ring-field span:nth-child(3) { inset: clamp(76px, 9.1vw, 140px); }
.ring-field span:nth-child(4) { inset: clamp(114px, 13.65vw, 210px); }
.ring-field span:nth-child(5) { inset: clamp(152px, 18.2vw, 280px); }

.headline-stage {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: clamp(520px, 62vh, 650px);
  min-height: 520px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.hero-heading {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  color: var(--color-neutral-900);
  font-size: var(--headline-size);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.985;
  text-align: center;
  text-wrap: balance;
}

.headline-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.04em;
}

.headline-line {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.3vw, 20px);
  white-space: nowrap;
}

.headline-photo {
  position: relative;
  z-index: 3;
  display: inline-flex;
  width: var(--headline-media);
  height: var(--headline-media);
  flex: 0 0 auto;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-neutral-900);
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition: width 240ms var(--ease-in-out);
}

.photo-viewport {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--color-neutral-200);
  box-shadow: inset 0 0 0 4px var(--color-neutral-900), inset 0 0 0 8px var(--color-neutral-0), 0 8px 24px rgb(18 3 9 / 8%);
  clip-path: inset(0 round 50%);
  transition: clip-path 240ms var(--ease-in-out), box-shadow 160ms ease;
}

.photo-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 650ms ease;
}

.photo-slide.is-active {
  opacity: 1;
}

.photo-slide img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.headline-photo-embrace .photo-slide:first-child img {
  object-position: 50% 50%;
}

.headline-photo-kids .photo-slide:first-child img {
  object-position: 50% 52%;
}

.photo-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(28px, 2.3vw, 36px);
  height: clamp(28px, 2.3vw, 36px);
  place-items: center;
  border-radius: 50%;
  color: var(--color-hope-700);
  background: var(--color-neutral-0);
  box-shadow: 0 8px 20px rgb(18 3 9 / 18%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity 160ms ease, transform 240ms var(--ease-in-out);
}

.photo-play svg {
  display: block;
  width: 58%;
  height: 58%;
  fill: currentColor;
}

.headline-photo:focus-visible {
  z-index: 12;
  width: var(--headline-media-wide);
  outline: 2px solid var(--color-hope-500);
  outline-offset: 4px;
}

.headline-photo:focus-visible .photo-viewport {
  clip-path: inset(0 round 14%);
}

.headline-photo:focus-visible .photo-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.disciples-highlight {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.9vw, 14px);
  overflow: hidden;
  padding: 0 clamp(12px, 1.55vw, 24px) 0.065em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-hope-700);
  background: transparent;
  isolation: isolate;
}

.disciples-highlight::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  border: 2px solid var(--color-hope-200);
  border-radius: inherit;
  background: var(--color-hope-100);
  clip-path: inset(0 round var(--radius-pill));
}

.disciples-highlight > span {
  position: relative;
  z-index: 1;
}

.disciples-indicator {
  width: clamp(11px, 1.17vw, 18px);
  height: clamp(11px, 1.17vw, 18px);
  flex: 0 0 auto;
  border-radius: 5px;
  background: var(--color-hope-500);
}

.attribute {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 16px;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
  text-decoration: none;
  transform: rotate(var(--tag-rotate));
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease;
}

.attribute-link {
  cursor: pointer;
}

.attribute-link:focus-visible {
  z-index: 12;
  outline: 2px solid var(--color-hope-500);
  outline-offset: 4px;
  box-shadow: 0 10px 24px rgb(18 3 9 / 10%);
  transform: translateY(-3px) rotate(var(--tag-rotate));
}

.attribute-note {
  position: absolute;
  z-index: 2;
  display: block;
  width: 220px;
  padding: 10px 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 11px 11px 11px 4px;
  color: var(--color-neutral-700);
  background: rgb(254 252 250 / 97%);
  box-shadow: 0 12px 28px rgb(18 3 9 / 9%);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--note-enter-y, -5px)) rotate(var(--note-rotate)) scale(0.97);
  transform-origin: var(--note-origin, top left);
  transition: opacity 150ms ease, transform 180ms var(--ease-out);
}

.attribute-note::after {
  position: absolute;
  width: 9px;
  height: 9px;
  content: "";
  border: solid var(--color-neutral-200);
  background: var(--color-neutral-0);
  transform: rotate(45deg);
}

.attribute-bold .attribute-note,
.attribute-discipleship .attribute-note,
.attribute-worship .attribute-note {
  top: calc(100% + 12px);
}

.attribute-bold .attribute-note {
  left: 16px;
}

.attribute-discipleship .attribute-note {
  left: 50%;
  --note-origin: top center;
  transform: translate(-50%, var(--note-enter-y, -5px)) rotate(var(--note-rotate)) scale(0.97);
}

.attribute-worship .attribute-note {
  right: 14px;
  --note-origin: top right;
}

.attribute-bold .attribute-note::after,
.attribute-discipleship .attribute-note::after,
.attribute-worship .attribute-note::after {
  top: -5px;
  border-width: 1px 0 0 1px;
}

.attribute-bold .attribute-note::after {
  left: 22px;
}

.attribute-discipleship .attribute-note::after {
  left: calc(50% - 5px);
}

.attribute-worship .attribute-note::after {
  right: 22px;
}

.attribute-prayer .attribute-note,
.attribute-evangelism .attribute-note,
.attribute-planting .attribute-note {
  bottom: calc(100% + 12px);
  --note-enter-y: 5px;
  --note-origin: bottom left;
}

.attribute-prayer .attribute-note {
  left: 14px;
}

.attribute-evangelism .attribute-note,
.attribute-planting .attribute-note {
  right: 12px;
  --note-origin: bottom right;
}

.attribute-prayer .attribute-note::after,
.attribute-evangelism .attribute-note::after,
.attribute-planting .attribute-note::after {
  bottom: -5px;
  border-width: 0 1px 1px 0;
}

.attribute-prayer .attribute-note::after {
  left: 22px;
}

.attribute-evangelism .attribute-note::after,
.attribute-planting .attribute-note::after {
  right: 22px;
}

.attribute-link:focus-visible .attribute-note {
  opacity: 1;
  transform: translateY(0) rotate(var(--note-rotate)) scale(1);
}

.attribute-discipleship:focus-visible .attribute-note {
  transform: translate(-50%, 0) rotate(var(--note-rotate)) scale(1);
}

.attribute svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: var(--color-neutral-900);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attribute-love {
  border-color: var(--color-love-200);
  color: var(--color-love-600);
  background: var(--color-love-100);
}

.attribute-hope {
  border-color: var(--color-hope-200);
  color: var(--color-hope-700);
  background: var(--color-hope-100);
}

.attribute-faith {
  border-color: var(--color-faith-200);
  color: var(--color-faith-600);
  background: var(--color-faith-100);
}

.attribute-peace {
  border-color: var(--color-peace-200);
  color: var(--color-peace-600);
  background: var(--color-peace-100);
}

.attribute-joy {
  border-color: var(--color-joy-200);
  color: var(--color-joy-700);
  background: var(--color-joy-100);
}

.attribute-neutral {
  border-color: var(--color-neutral-300);
  color: var(--color-hope-700);
  background: var(--color-neutral-0);
}

.attribute-bold { top: 10.4%; left: 2.3%; }
.attribute-discipleship { top: 0.6%; left: 24%; }
.attribute-worship { top: 6.8%; right: 3.8%; }
.attribute-prayer { bottom: 6%; left: 1.2%; }
.attribute-evangelism { right: 1.9%; bottom: 8%; }
.attribute-planting { right: 26%; bottom: 4.3%; }

.hero-actions {
  position: relative;
  z-index: 5;
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding-inline: 24px;
}

.people-of-hope {
  display: flex;
  min-width: 210px;
  flex-direction: column;
  gap: 8px;
}

.people-of-hope h2 {
  margin: 0;
  color: var(--color-neutral-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 16px;
  text-transform: uppercase;
}

.avatar-cluster {
  display: flex;
  height: 68px;
  align-items: center;
  isolation: isolate;
}

.people-avatar {
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  overflow: visible;
  padding: 0;
  border: 2px solid;
  border-radius: 50%;
  cursor: pointer;
  background: var(--color-neutral-0);
  transition: transform 180ms var(--ease-out), box-shadow 180ms ease;
}

.people-avatar + .people-avatar {
  margin-left: -22px;
}

.people-avatar:nth-child(1) { z-index: 4; }
.people-avatar:nth-child(2) { z-index: 3; }
.people-avatar:nth-child(3) { z-index: 2; }
.people-avatar:nth-child(4) { z-index: 1; }

.avatar-image {
  position: absolute;
  inset: 2px;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

.people-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.avatar-east { transform: scale(1.12); }
.avatar-filipino { transform: scale(1); }
.avatar-white,
.avatar-black { transform: scale(1.1); }

.avatar-love { border-color: var(--color-love-500); background: var(--color-love-100); }
.avatar-faith { border-color: var(--color-faith-500); background: var(--color-faith-100); }
.avatar-joy { border-color: var(--color-joy-500); background: var(--color-joy-100); }
.avatar-peace { border-color: var(--color-peace-500); background: var(--color-peace-100); }

.name-tag {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  display: flex;
  width: max-content;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  color: var(--color-neutral-900);
  background: var(--color-neutral-0);
  box-shadow: 0 10px 24px rgb(18 3 9 / 10%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px) scale(0.96);
  transform-origin: top center;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.name-tag strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
}

.name-tag span {
  color: var(--color-neutral-700);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 12px;
  text-transform: uppercase;
}

.people-avatar:focus-visible {
  z-index: 20;
  transform: translateY(-8px);
}

.people-avatar:focus-visible .name-tag {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.button-primary,
.button-secondary {
  min-height: 50px;
  padding: 14px 22px;
  font-size: 15px;
}

.button-primary {
  color: var(--color-neutral-0);
  background: var(--color-neutral-900);
}

.button-secondary {
  border: 1px solid var(--color-hope-300);
  color: var(--color-hope-700);
  background: var(--color-neutral-0);
}

.button-arrow {
  display: inline-block;
  transition: transform 160ms var(--ease-out);
}

.ask-dialog {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-neutral-900);
  background: transparent;
  overflow: visible;
}

.ask-dialog::backdrop {
  background: rgb(18 3 9 / 36%);
  backdrop-filter: blur(3px);
}

.ask-surface {
  width: 100%;
  padding: 108px var(--page-gutter) 40px;
  border-bottom: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-0);
  box-shadow: 0 24px 64px rgb(18 3 9 / 14%);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.ask-dialog.is-visible .ask-surface {
  opacity: 1;
  transform: translateY(0);
}

.ask-inner {
  width: min(1460px, 100%);
  margin-inline: auto;
}

.ask-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
}

.ask-kicker {
  margin: 0 0 6px;
  color: var(--color-hope-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 16px;
  text-transform: uppercase;
}

.ask-heading-row h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.close-button {
  width: 46px;
  flex: 0 0 46px;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-0);
}

.ask-form {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 22px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 8px 32px rgb(18 3 9 / 7%);
}

.ask-form > svg {
  flex: 0 0 24px;
  color: var(--color-hope-700);
}

.ask-form input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--color-neutral-900);
  background: transparent;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 400;
  line-height: 1.3;
}

.ask-form input::placeholder {
  color: var(--color-neutral-500);
}

.search-button {
  min-width: 104px;
  padding: 14px 22px;
  color: var(--color-neutral-0);
  background: var(--color-hope-500);
  font-size: 15px;
}

.suggested-questions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.suggested-questions > span {
  margin-right: 2px;
  color: var(--color-neutral-700);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.suggested-questions button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-pill);
  color: var(--color-neutral-700);
  background: var(--color-neutral-50);
  cursor: pointer;
  font-size: 13px;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.search-status {
  min-height: 20px;
  margin: 14px 0 0;
  color: var(--color-neutral-700);
  font-size: 13px;
  line-height: 20px;
}

.video-dialog {
  position: fixed;
  z-index: 60;
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  color: var(--color-neutral-0);
  background: transparent;
  overflow: visible;
}

.video-dialog::backdrop {
  background: rgb(18 3 9 / 72%);
  backdrop-filter: blur(6px);
}

.video-dialog-surface {
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--color-neutral-900);
  box-shadow: 0 28px 80px rgb(18 3 9 / 32%);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}

.video-dialog.is-visible .video-dialog-surface {
  opacity: 1;
  transform: scale(1);
}

.video-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(14px, 1.4vw, 20px);
}

.video-dialog-kicker {
  margin: 0 0 5px;
  color: var(--color-hope-200);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.video-dialog-heading h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.video-close-button {
  width: 46px;
  min-height: 46px;
  flex: 0 0 46px;
  border: 1px solid rgb(255 255 255 / 24%);
  color: var(--color-neutral-0);
  background: rgb(255 255 255 / 8%);
}

.video-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1.2vw, 18px);
  background: var(--color-neutral-700) url("assets/images/hope-home-community.webp") center / cover no-repeat;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* First-load story: explanation and delight on a rare event. */
.js .headline-line {
  opacity: 0;
  transform: translateY(105%);
  transition: opacity 540ms var(--ease-out) var(--line-delay), transform 700ms var(--ease-out) var(--line-delay);
}

.js .disciples-highlight::before {
  clip-path: inset(0 100% 0 0 round var(--radius-pill));
  transition: clip-path 680ms var(--ease-in-out) 980ms;
}

.js .disciples-indicator {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms var(--ease-out) 1540ms, transform 220ms var(--ease-out) 1540ms;
}

.js .attribute {
  opacity: 0;
  transform: translate(var(--enter-x), var(--enter-y)) rotate(var(--tag-rotate)) scale(0.96);
  transition: opacity 420ms var(--ease-out) var(--tag-delay), transform 520ms var(--ease-out) var(--tag-delay), box-shadow 160ms ease;
}

.js .ring-field {
  opacity: 0;
  transition: opacity 500ms var(--ease-out) 900ms;
}

.js .hero-actions {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out) 900ms, transform 500ms var(--ease-out) 900ms;
}

.js body.is-ready .headline-line {
  opacity: 1;
  transform: translateY(0);
}

.js body.is-ready .disciples-highlight::before {
  clip-path: inset(0 round var(--radius-pill));
}

.js body.is-ready .disciples-indicator {
  opacity: 1;
  transform: scale(1);
}

.js body.is-ready .attribute {
  opacity: 1;
  transform: translate(0, 0) rotate(var(--tag-rotate)) scale(1);
}

.js body.is-ready .ring-field {
  opacity: 0.24;
}

.js body.is-ready .hero-actions {
  opacity: 1;
  transform: translateY(0);
}

/* Preserve the Paper composition on presentation-scale and 32-inch displays. */
@media (min-width: 1700px) {
  :root {
    --page-gutter: clamp(48px, 3.3vw, 100px);
    --headline-size: clamp(138px, 8.18vw, 240px);
    --headline-media: clamp(116px, 6.9vw, 200px);
    --headline-media-wide: clamp(206px, 12.27vw, 356px);
  }

  .site-shell {
    margin: 12px;
    min-height: calc(100dvh - 24px);
    border-radius: 22px;
  }

  .site-header {
    min-height: clamp(100px, 5vw, 150px);
    padding-inline: clamp(56px, 4vw, 120px);
  }

  .brand-mark img {
    width: clamp(30px, 1.55vw, 46px);
    height: auto;
  }

  .primary-nav {
    gap: clamp(38px, 2.1vw, 64px);
  }

  .primary-nav a,
  .ask-trigger {
    font-size: clamp(16px, 0.78vw, 22px);
    line-height: 1.3;
  }

  .ask-trigger {
    min-height: clamp(52px, 2.55vw, 72px);
    gap: clamp(9px, 0.55vw, 16px);
    padding: clamp(14px, 0.7vw, 20px) clamp(22px, 1.15vw, 34px);
  }

  .ask-trigger svg {
    width: clamp(18px, 0.85vw, 24px);
    height: clamp(18px, 0.85vw, 24px);
  }

  .hero {
    min-height: calc(100dvh - 26px);
    gap: clamp(54px, 3vw, 88px);
    padding-top: clamp(172px, 8.6vw, 250px);
    padding-bottom: clamp(92px, 4.5vw, 132px);
  }

  .headline-stage,
  .hero-actions {
    width: min(100%, 2600px);
    margin-inline: auto;
  }

  .headline-stage {
    min-height: clamp(720px, 62vh, 1120px);
  }

  .headline-line {
    gap: clamp(22px, 1.3vw, 38px);
  }

  .photo-viewport {
    box-shadow: inset 0 0 0 clamp(4px, 0.24vw, 7px) var(--color-neutral-900), inset 0 0 0 clamp(8px, 0.48vw, 14px) var(--color-neutral-0), 0 8px 24px rgb(18 3 9 / 8%);
  }

  .disciples-highlight {
    gap: clamp(14px, 0.78vw, 23px);
    padding-right: clamp(26px, 1.35vw, 40px);
    padding-left: clamp(26px, 1.35vw, 40px);
    border-width: clamp(2px, 0.14vw, 4px);
  }

  .disciples-indicator {
    width: clamp(19px, 1vw, 29px);
    height: clamp(19px, 1vw, 29px);
    border-radius: clamp(5px, 0.28vw, 8px);
  }

  .attribute {
    gap: clamp(11px, 0.62vw, 18px);
    padding: clamp(11px, 0.66vw, 19px) clamp(17px, 1.05vw, 31px);
    border-width: clamp(1px, 0.07vw, 2px);
    font-size: clamp(13px, 0.75vw, 22px);
    line-height: 1.45;
  }

  .attribute svg {
    width: clamp(20px, 1.05vw, 31px);
    height: clamp(20px, 1.05vw, 31px);
    flex-basis: clamp(20px, 1.05vw, 31px);
    stroke-width: 1.65;
  }

  .attribute-note {
    width: clamp(220px, 10vw, 288px);
    padding: clamp(11px, 0.55vw, 16px) clamp(13px, 0.68vw, 20px);
    border-radius: clamp(11px, 0.55vw, 16px) clamp(11px, 0.55vw, 16px) clamp(11px, 0.55vw, 16px) clamp(4px, 0.22vw, 7px);
    font-size: clamp(13px, 0.62vw, 18px);
  }

  .attribute-bold { top: 2%; left: 4.5%; }
  .attribute-discipleship { top: 1.5%; left: 25%; }
  .attribute-worship { top: 0; right: 4.5%; }
  .attribute-prayer { bottom: 0; left: 4%; }
  .attribute-evangelism { right: 2%; bottom: 0; }
  .attribute-planting { right: 26%; bottom: 0; }

  .hero-actions {
    padding-inline: clamp(28px, 1.7vw, 50px);
  }

  .people-of-hope {
    min-width: clamp(244px, 11vw, 330px);
    gap: clamp(9px, 0.48vw, 14px);
  }

  .people-of-hope h2 {
    font-size: clamp(12px, 0.62vw, 18px);
    line-height: 1.45;
  }

  .avatar-cluster {
    height: clamp(78px, 3.6vw, 108px);
  }

  .people-avatar {
    width: clamp(78px, 3.6vw, 108px);
    height: clamp(78px, 3.6vw, 108px);
    flex-basis: clamp(78px, 3.6vw, 108px);
    border-width: clamp(2px, 0.12vw, 4px);
  }

  .people-avatar + .people-avatar {
    margin-left: clamp(-34px, -1.15vw, -25px);
  }

  .name-tag {
    top: calc(100% + clamp(12px, 0.6vw, 18px));
    gap: 2px;
    padding: clamp(9px, 0.48vw, 14px) clamp(11px, 0.6vw, 18px);
    border-radius: clamp(8px, 0.45vw, 13px);
  }

  .name-tag strong {
    font-size: clamp(13px, 0.68vw, 20px);
    line-height: 1.25;
  }

  .name-tag span {
    font-size: clamp(9px, 0.48vw, 14px);
    line-height: 1.3;
  }

  .cta-row {
    gap: clamp(16px, 0.8vw, 24px);
  }

  .button-primary,
  .button-secondary {
    min-height: clamp(56px, 2.65vw, 78px);
    padding: clamp(16px, 0.8vw, 24px) clamp(25px, 1.3vw, 38px);
    font-size: clamp(17px, 0.78vw, 23px);
    line-height: 1.3;
  }

  .ask-surface {
    padding-top: clamp(132px, 6.5vw, 190px);
    padding-bottom: clamp(48px, 2.4vw, 72px);
  }

  .ask-inner {
    width: min(2400px, 100%);
  }

  .ask-form {
    min-height: clamp(78px, 4vw, 116px);
    gap: clamp(18px, 0.9vw, 27px);
    padding: clamp(12px, 0.65vw, 19px) clamp(15px, 0.8vw, 24px) clamp(12px, 0.65vw, 19px) clamp(26px, 1.3vw, 38px);
  }

  .ask-form input {
    font-size: clamp(24px, 1.2vw, 34px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .headline-photo:hover {
    z-index: 12;
    width: var(--headline-media-wide);
  }

  .headline-photo:hover .photo-viewport {
    clip-path: inset(0 round 14%);
  }

  .headline-photo:hover .photo-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .js body.is-ready .attribute-link:hover,
  .attribute-link:hover {
    z-index: 12;
    box-shadow: 0 10px 24px rgb(18 3 9 / 10%);
    transform: translateY(-3px) rotate(var(--tag-rotate));
  }

  .attribute-link:hover .attribute-note {
    opacity: 1;
    transform: translateY(0) rotate(var(--note-rotate)) scale(1);
  }

  .attribute-discipleship:hover .attribute-note {
    transform: translate(-50%, 0) rotate(var(--note-rotate)) scale(1);
  }

  .brand-mark:hover,
  .button:hover {
    transform: translateY(-2px);
  }

  .primary-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .ask-trigger:hover,
  .search-button:hover {
    background: var(--color-hope-700);
    box-shadow: 0 10px 24px rgb(5 134 255 / 18%);
  }

  .ask-trigger:hover::after {
    animation: none;
  }

  .button-primary:hover {
    background: var(--color-neutral-700);
    box-shadow: 0 10px 24px rgb(18 3 9 / 16%);
  }

  .button-secondary:hover {
    border-color: var(--color-hope-500);
    background: var(--color-hope-100);
  }

  .button-secondary:hover .button-arrow {
    transform: translateX(3px);
  }

  .close-button:hover {
    border-color: var(--color-neutral-500);
    background: var(--color-neutral-100);
  }

  .video-close-button:hover {
    border-color: rgb(255 255 255 / 48%);
    background: rgb(255 255 255 / 16%);
  }

  .suggested-questions button:hover {
    border-color: var(--color-hope-300);
    color: var(--color-hope-700);
    background: var(--color-hope-100);
  }

  .people-avatar:hover {
    z-index: 20;
    box-shadow: 0 10px 24px rgb(18 3 9 / 16%);
    transform: translateY(-8px);
  }

  .people-avatar:hover .name-tag {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 1100px) {
  :root {
    --headline-size: clamp(54px, 8.4vw, 92px);
    --headline-media: clamp(62px, 6.7vw, 80px);
    --headline-media-wide: clamp(110px, 11.91vw, 142px);
  }

  .attribute {
    gap: 8px;
    padding: 8px 12px;
    font-size: 10px;
  }

  .attribute svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .headline-stage {
    min-height: 500px;
  }

  .hero-actions {
    padding-inline: 8px;
  }
}

@media (max-width: 760px) {
  :root {
    --headline-size: clamp(46px, 12.8vw, 72px);
    --headline-media: clamp(52px, 13vw, 68px);
    --headline-media-wide: clamp(92px, 23.11vw, 121px);
  }

  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 76px;
  }

  .primary-nav {
    display: none;
  }

  .hero {
    gap: 30px;
    padding-top: 100px;
    padding-bottom: 72px;
  }

  .headline-stage {
    min-height: 690px;
    align-items: center;
  }

  .hero-heading {
    gap: 8px;
  }

  .headline-mask {
    overflow: visible;
  }

  .headline-line {
    flex-wrap: wrap;
    gap: 8px 10px;
    white-space: normal;
  }

  .attribute {
    gap: 6px;
    max-width: 58%;
    padding: 7px 10px;
    font-size: 9px;
    line-height: 14px;
  }

  .attribute span {
    white-space: normal;
  }

  .attribute-bold { top: 1%; left: 0; }
  .attribute-discipleship { top: 8%; left: 12%; }
  .attribute-worship { top: 2%; right: 0; }
  .attribute-prayer { bottom: 10%; left: 0; }
  .attribute-evangelism { right: 0; bottom: 18%; }
  .attribute-planting { right: 8%; bottom: 2%; }

  .hero-actions {
    align-items: flex-end;
    gap: 24px;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .button-primary,
  .button-secondary {
    min-height: 46px;
    padding: 12px 18px;
    font-size: 14px;
  }

  .ask-surface {
    padding-top: 90px;
  }
}

@media (max-width: 560px) {
  :root {
    --headline-size: clamp(40px, 12.6vw, 56px);
    --headline-media: clamp(48px, 12vw, 56px);
    --headline-media-wide: clamp(85px, 21.33vw, 100px);
    --page-gutter: 16px;
  }

  html,
  body {
    background: var(--color-neutral-0);
  }

  .site-shell {
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .brand-mark img {
    width: 23px;
    height: 39px;
  }

  .ask-trigger {
    min-height: 42px;
    padding: 10px 15px;
  }

  .hero {
    min-height: 100dvh;
    padding-top: 92px;
    padding-bottom: 72px;
  }

  .ring-field {
    top: -220px;
    left: -350px;
  }

  .headline-stage {
    min-height: 620px;
  }

  .photo-viewport {
    box-shadow: inset 0 0 0 3px var(--color-neutral-900), inset 0 0 0 6px var(--color-neutral-0), 0 6px 18px rgb(18 3 9 / 8%);
  }

  .disciples-highlight {
    border-width: 1.5px;
  }

  .attribute {
    max-width: 52%;
    font-size: 8px;
    letter-spacing: 0.065em;
  }

  .attribute-note {
    width: 176px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .attribute svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 34px;
  }

  .people-of-hope {
    align-self: flex-start;
  }

  .cta-row {
    width: 100%;
    flex-direction: row;
  }

  .cta-row .button {
    flex: 1;
  }

  .ask-heading-row {
    gap: 16px;
  }

  .ask-form {
    min-height: 62px;
    gap: 10px;
    padding: 8px 8px 8px 16px;
  }

  .ask-form > svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .ask-form input {
    font-size: 16px;
  }

  .search-button {
    min-width: auto;
    min-height: 46px;
    padding: 11px 15px;
    font-size: 14px;
  }
}

@media (max-width: 390px) {
  .attribute {
    max-width: 56%;
  }

  .hero-actions {
    padding-inline: 0;
  }

  .people-avatar {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }

  .people-avatar + .people-avatar {
    margin-left: -20px;
  }

  .cta-row {
    flex-direction: column;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js body.is-ready .ask-trigger::after {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .js .headline-line,
  .js .hero-actions {
    transform: none;
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }

  .js .attribute {
    transform: rotate(var(--tag-rotate));
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }

  .js .ring-field {
    transform: rotate(-8deg);
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }

  .js .disciples-highlight::before {
    opacity: 0;
    clip-path: inset(0 round var(--radius-pill));
    transition: opacity 200ms ease 320ms;
  }

  .js body.is-ready .disciples-highlight::before {
    opacity: 1;
  }

  .js .disciples-indicator {
    transform: none;
    transition: opacity 160ms ease 420ms;
  }

  .photo-viewport,
  .photo-play {
    transition: opacity 120ms ease;
  }

  .headline-photo {
    transition: none;
  }

  .photo-slide {
    transition: opacity 200ms ease;
  }

  .video-dialog-surface {
    transform: none;
    transition: opacity 160ms ease;
  }

  .people-avatar,
  .button,
  .brand-mark,
  .attribute {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }

  .attribute-note {
    transform: rotate(var(--note-rotate));
    transition: opacity 120ms ease;
  }

  .attribute-discipleship .attribute-note {
    transform: translateX(-50%) rotate(var(--note-rotate));
  }

  .js body.is-ready .attribute-link:hover,
  .attribute-link:hover,
  .attribute-link:focus-visible {
    transform: rotate(var(--tag-rotate));
  }

  .attribute-link:hover .attribute-note,
  .attribute-link:focus-visible .attribute-note {
    transform: rotate(var(--note-rotate));
  }

  .attribute-discipleship:hover .attribute-note,
  .attribute-discipleship:focus-visible .attribute-note {
    transform: translateX(-50%) rotate(var(--note-rotate));
  }
}