/* about v9 (17 Oct 2026): the full story, told in six different ways. Photographs in every block; the verse beside every value */
.who2 .inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-xl); align-items: center; }
.who2 .txt { grid-column: 1 / 6; display: grid; gap: var(--s-m); justify-items: start; }
.who2 .txt .t-big { color: var(--ink); font-weight: 400; }
.who2 .tag { display: flex; align-items: center; gap: var(--s-s); padding-top: var(--s-s); border-top: 1px solid var(--border); }
.collage { grid-column: 7 / 13; position: relative; height: clamp(520px, 52vw, 820px); }
.collage figure { position: absolute; overflow: hidden; border-radius: var(--r-card); box-shadow: 0 40px 80px -40px rgba(17, 20, 24, .45); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { left: 0; top: 0; width: 64%; height: 62%; }
.collage .c2 { right: 0; top: 18%; width: 42%; height: 46%; z-index: 2; }
.collage .c3 { left: 14%; bottom: 0; width: 52%; height: 38%; z-index: 3; }

.vm .inner { display: grid; gap: var(--s-xl); }
.vm .vhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-m); align-items: end; }
.vm .vhead h2 { grid-column: 1 / 6; font-size: clamp(36px, 4.4vw, 104px); }
.vm .vhead .statement { grid-column: 7 / 13; font-size: var(--t-xl); font-weight: 300; letter-spacing: -.018em; line-height: 1.2; color: rgba(255, 255, 255, .9); }
.vm .vhead .statement b { font-weight: 500; color: var(--gold-300); }
.mpanels { display: flex; gap: var(--s-xs); height: clamp(460px, 62svh, 720px); }
.mp { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-card); overflow: hidden; isolation: isolate; color: var(--white); display: grid; align-content: end; padding: var(--s-m); transition: flex-grow 900ms var(--ease); outline: none; cursor: default; }
.mp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1400ms var(--ease), filter 900ms var(--ease); filter: grayscale(.35) brightness(.86); }
.mp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 15, .1) 30%, rgba(10, 12, 15, .55) 60%, rgba(10, 12, 15, .92)); }
.mp .w { font-size: var(--t-l); white-space: nowrap; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; display: flex; align-items: center; gap: .4em; }
.mp .w .ico-tile { --ts: 46px; }
.mp p { max-width: 24em; max-height: 0; margin-top: 0; overflow: hidden; color: var(--white); text-shadow: 0 1px 10px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 700ms var(--ease), max-height 700ms var(--ease), margin-top 700ms var(--ease); }
.mp .n { position: absolute; top: var(--s-m); left: var(--s-m); font-size: var(--t-m); font-weight: 400; color: var(--white); text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 14px rgba(0, 0, 0, .45); }
.mp::before { content: ""; position: absolute; inset: 0 0 auto; height: 30%; z-index: -1; background: linear-gradient(rgba(10, 12, 15, .45), transparent); }
.mpanels:not(:hover):not(:focus-within) .mp:first-child, .mp:hover, .mp:focus-visible, .mp:focus-within { flex-grow: 2.2; }
.mpanels:not(:hover):not(:focus-within) .mp:first-child p, .mp:hover p, .mp:focus-visible p, .mp:focus-within p { opacity: 1; transform: none; max-height: 10em; margin-top: var(--s-s); transition-delay: 250ms, 250ms, 0ms, 0ms; }
.mpanels:not(:hover):not(:focus-within) .mp:first-child img, .mp:hover img, .mp:focus-visible img { filter: none; transform: scale(1.03); }
.mp:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-300); }

.values-intro { padding-block: var(--s-xl) var(--s-m); text-align: center; }
.values-intro .inner { display: grid; justify-items: center; gap: var(--s-s); }

.team2 .inner { display: grid; gap: var(--s-l); }
/* 18 Oct: the pastors stand in a gold studio: foil, sand grain, a warm light behind them, the faded swirl, a floor under their feet */
.team2 .lead { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; border-radius: var(--r-panel); overflow: hidden; }
.team2 .lead .stage { position: relative; min-height: 680px; display: grid; align-items: end; justify-items: center; overflow: hidden; isolation: isolate; padding: var(--s-l) var(--s-s) 0; margin: 0; }
.team2 .lead .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 58% 52% at 50% 40%, rgba(255, 236, 196, .34), rgba(255, 236, 196, 0) 72%); }
.team2 .lead .stage .floor { position: absolute; z-index: 0; left: 8%; right: 8%; bottom: -5%; height: 18%; background: radial-gradient(ellipse at 50% 50%, rgba(40, 26, 6, .42), transparent 70%); }
.team2 .lead .stage img { position: relative; z-index: 2; width: min(92%, 640px); height: auto; filter: drop-shadow(0 30px 40px rgba(40, 26, 6, .28)); }
.team2 .lead .stage .watermark { width: 104%; left: -2%; top: 2%; color: rgba(255, 240, 210, .13); z-index: 0; }
.team2 .lead .txt { padding: var(--s-xl) clamp(24px, 5vw, 96px) var(--s-xl) clamp(16px, 3vw, 48px); display: grid; align-content: center; gap: var(--s-s); justify-items: start; }
.team2 .lead .person-n .w-light { font-weight: 500; color: #F3E9D4; }
.team2 .lead .role { color: #FFFFFF; font-size: var(--t-big); font-weight: 300; padding-bottom: var(--s-xs); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.team2 .lead .txt p.p { color: #FFFFFF; max-width: 34em; }
.team2 .group-h { font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; margin-top: var(--s-l); display: flex; align-items: baseline; gap: .6em; }
.team2 .group-h small { font-size: var(--t-small); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-l) var(--gap); }
.crew .person { display: grid; gap: .35em; }
.crew .pf { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--s-xs); background: var(--char-800); }
.crew .pf::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(213, 184, 124, .0); border-radius: calc(var(--r-card) * .7); transition: border-color 600ms var(--ease); pointer-events: none; }
.crew .pf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(.3) contrast(1.03); transition: filter 900ms var(--ease), transform 1400ms var(--ease); }
.crew .person:hover .pf img { filter: none; transform: scale(1.04); }
.crew .person:hover .pf::after { border-color: rgba(213, 184, 124, .55); }
.crew .name { font-size: var(--t-m); font-weight: 500; letter-spacing: -.02em; color: var(--white); }
.crew .role { color: var(--gold-300); }

.believe2 { display: grid; gap: var(--s-xs); justify-items: start; padding-top: var(--s-m); border-top: 1px solid var(--border); }
.believe2 h3 { font-weight: 500; }
.believe2 p { color: #3F3F3F; }

@media (max-width: 1024px) {
  .who2 .txt, .collage, .vm .vhead h2, .vm .vhead .statement { grid-column: 1 / -1; }
    .mpanels { flex-direction: column; height: auto; }
  .mp { min-height: 420px; }
  .mp p { opacity: 1; transform: none; max-height: none; margin-top: var(--s-s); }
  .mp img { filter: none; }
  .team2 .lead { grid-template-columns: 1fr; }
  .team2 .lead .stage { min-height: 0; aspect-ratio: 1; padding-top: var(--s-m); }
  .team2 .lead .txt { padding: var(--s-l) var(--s-m); }
  .crew { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .collage { height: 118vw; }
  .crew { gap: var(--s-m) var(--s-s); }
  .crew .name { font-size: var(--t-s); }
}
.numbers { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--s-xl); }
.numbers .watermark { position: absolute; width: min(56vw, 900px); right: -12%; top: -30%; color: rgba(255, 244, 222, .08); z-index: -1; }
.numbers .watermark svg { width: 100%; height: auto; }
.n4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.n4 > div { display: grid; gap: var(--s-xs); align-content: start; padding: var(--s-s) var(--s-m) var(--s-s) 0; }
.n4 > div + div { padding-left: var(--s-m); border-left: 1px solid rgba(255, 244, 222, .35); }
.n4 .num { font-size: var(--t-xxxl); font-weight: 900; letter-spacing: -.05em; line-height: .85; color: var(--white); font-variant-numeric: tabular-nums; text-shadow: 0 2px 30px rgba(40, 28, 10, .25); }
.n4 .lab { font-size: var(--t-s); font-weight: 500; letter-spacing: -.01em; color: var(--white); max-width: 12em; }
@media (max-width: 1024px) { .n4 { grid-template-columns: 1fr 1fr; row-gap: var(--s-l); } .n4 > div:nth-child(3) { padding-left: 0; border-left: 0; } }
/* 18 Oct round 2: the volunteer leaders stand in the grey studio, cut out of their own photos, so no off-palette backdrop shows */
.crew .pf.studio { display: grid; align-items: end; justify-items: center; background-color: #DCDCDC; background-image: var(--tex-light), radial-gradient(ellipse 80% 70% at 50% 34%, #F6F6F6 0%, #E4E4E4 42%, #C9C9C9 85%, #BDBDBD 100%); background-size: 256px, 100% 100%; background-blend-mode: multiply, normal; }
.crew .pf.studio { isolation: isolate; }
.crew .pf.studio .watermark { width: 120%; left: -10%; top: 4%; color: rgba(255, 255, 255, .55); z-index: 0; }
.crew .pf.studio img { position: relative; z-index: 1; width: 86%; height: 92%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 22px rgba(18, 18, 18, .22)); }