:root {
  --ink: #080a12;
  --navy: #071147;
  --blue: #1839e8;
  --bright: #3157ff;
  --paper: #f6f3ec;
  --white: #fff;
  --muted: #666a76;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
img { display: block; width: 100%; }
a { color: inherit; }

.site-header {
  position: absolute; z-index: 10; inset: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px clamp(22px, 5vw, 76px);
}
.brand { width: clamp(210px, 25vw, 350px); background: #050505; padding: 7px 10px; border-radius: 2px; }
.brand img { height: 58px; object-fit: contain; }
.header-link { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.header-link svg { width: 22px; fill: currentColor; }

.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; }
.hero-photo { position: absolute; inset: 0; background: url("assets/church-building.jpg") center 48% / cover no-repeat; transform: scale(1.03); animation: settle 1.5s ease-out forwards; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,4,24,.92) 0%, rgba(3,7,35,.75) 42%, rgba(0,0,0,.25) 72%, rgba(0,0,0,.44) 100%), linear-gradient(0deg, rgba(0,0,0,.62), transparent 42%); }
.hero-content { position: relative; width: min(1180px, 90vw); padding: 150px 0 110px; }
.eyebrow { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: 12px; }
.eyebrow::before { content: ""; display: inline-block; width: 32px; height: 2px; margin: 0 12px 3px 0; background: var(--bright); }
.eyebrow.blue { color: var(--blue); }
h1, h2 { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; letter-spacing: -.035em; }
h1 { max-width: 850px; margin: 0; font-size: clamp(56px, 8vw, 112px); line-height: .93; }
h1 em { color: #9cafef; font-style: italic; }
.hero-copy { max-width: 620px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.65; color: rgba(255,255,255,.82); margin: 30px 0 36px; }
.primary-button, .light-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 22px; text-decoration: none; font-weight: 700; font-size: 14px; transition: transform .2s ease, background .2s ease; }
.primary-button { background: var(--bright); color: #fff; }
.primary-button svg { width: 20px; }
.primary-button:hover, .light-button:hover { transform: translateY(-2px); }
.primary-button:hover { background: #2447de; }
.scroll-cue { position: absolute; bottom: 28px; right: clamp(22px, 5vw, 76px); display: flex; align-items: center; gap: 10px; text-decoration: none; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.8); }
.scroll-cue svg { width: 18px; }

.welcome { width: min(1180px, 90vw); margin: 0 auto; padding: clamp(80px, 11vw, 160px) 0; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.welcome h2, .section-heading h2, .connect h2 { margin: 0; font-size: clamp(46px, 6vw, 78px); line-height: 1.02; }
.welcome-copy > p:not(.eyebrow):not(.small-note) { color: var(--muted); line-height: 1.85; font-size: 17px; margin: 28px 0 22px; }
.small-note { text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; color: var(--blue); }
.feature-photo { margin: 0; position: relative; }
.feature-photo img { aspect-ratio: 4/3; object-fit: cover; }
.feature-photo::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1px solid rgba(24,57,232,.32); z-index: -1; }
.feature-photo figcaption { position: absolute; left: -28px; bottom: -28px; background: var(--navy); color: #fff; padding: 20px 25px; min-width: 230px; }
.feature-photo figcaption span { display: block; color: #a9b8ff; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 6px; }
.feature-photo figcaption strong { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; font-size: 23px; }

.gallery-section { background: #fff; padding: clamp(80px, 10vw, 140px) max(5vw, 22px); }
.section-heading { max-width: 750px; margin: 0 auto 50px; text-align: center; }
.section-heading .eyebrow::before { display: none; }
.section-heading h2 { font-size: clamp(42px, 5.5vw, 70px); }
.gallery { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; grid-auto-rows: 310px; gap: 16px; }
.tile { margin: 0; overflow: hidden; }
.tile img { height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.035); }
.tile-wide { grid-row: span 2; }

.connect { padding: clamp(60px, 9vw, 120px) max(5vw, 22px); background: linear-gradient(125deg, var(--navy), #142898 74%, #244cff); color: #fff; }
.connect-card { max-width: 1180px; margin: 0 auto; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.connect-card > div { max-width: 700px; }
.connect h2 { font-size: clamp(48px, 6vw, 76px); }
.connect p:not(.eyebrow) { color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.7; max-width: 610px; }
.connect .eyebrow::before { background: #9cafef; }
.light-button { flex: 0 0 auto; background: #fff; color: var(--navy); }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 34px max(5vw, 22px); background: #050505; color: #a9a9ae; font-size: 12px; }
footer img { width: 210px; }
footer p { margin: 0; }
.domain { text-align: right; letter-spacing: .08em; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes settle { from { transform: scale(1.1); } to { transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .site-header { padding-top: 17px; }
  .brand { width: 205px; }
  .brand img { height: 45px; }
  .header-link span { display: none; }
  .hero-content { padding-top: 145px; }
  .hero-photo { background-position: 64% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(1,4,24,.9), rgba(1,4,24,.46)), linear-gradient(0deg, rgba(0,0,0,.72), transparent 55%); }
  .scroll-cue { left: 5vw; right: auto; }
  .welcome { grid-template-columns: 1fr; }
  .feature-photo figcaption { left: 14px; bottom: -35px; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .tile-wide { grid-row: span 1; }
  .connect-card { display: block; }
  .light-button { margin-top: 24px; }
  footer { grid-template-columns: 1fr; text-align: center; }
  footer img { margin: 0 auto; }
  .domain { text-align: center; }
}