:root { --ink:#0b1e23; --cream:#f3f0e7; --gold:#efb43e; --teal:#14373d; --muted:#aab8b7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:92px; padding:0 5.5vw; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:white; border-bottom:1px solid rgba(255,255,255,.12); position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold); border-radius:50%; font:700 13px/1 Georgia,serif; letter-spacing:-1px; }
.brand strong,.brand small { display:block; text-transform:uppercase; letter-spacing:.15em; }
.brand strong { font:700 13px/1.1 Arial,sans-serif; }
.brand small { color:var(--gold); font-size:8px; margin-top:5px; }
nav { display:flex; gap:38px; font-size:13px; color:#d2d9d8; }
nav a:hover { color:var(--gold); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:54px; padding:0 24px; background:var(--gold); color:var(--ink); font-weight:700; font-size:13px; transition:.2s ease; }
.button:hover { background:#ffd06b; transform:translateY(-2px); }
.button-small { min-height:42px; padding:0 20px; }
.hero { min-height:690px; background:var(--ink); color:white; padding:85px 7vw 100px; display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:7vw; position:relative; overflow:hidden; }
.hero-glow { position:absolute; width:700px; height:700px; background:radial-gradient(circle, rgba(30,91,92,.55),transparent 66%); top:-150px; right:-110px; }
.hero-copy,.hero-media { position:relative; z-index:1; }
.eyebrow { text-transform:uppercase; letter-spacing:.24em; font-size:10px; font-weight:700; color:var(--gold); display:flex; align-items:center; gap:10px; margin:0 0 22px; }
.eyebrow span { display:block; width:26px; height:1px; background:currentColor; }
h1 { font:400 clamp(56px,6vw,96px)/.93 Georgia,serif; letter-spacing:-.055em; margin:0; max-width:680px; }
h1 em { color:var(--gold); font-weight:400; }
.hero-lead { color:#b9c4c3; font:17px/1.7 Georgia,serif; max-width:510px; margin:30px 0 35px; }
.hero-actions { display:flex; align-items:center; gap:30px; }
.text-link { color:white; font-size:12px; font-weight:700; display:inline-flex; gap:15px; align-items:center; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:6px; }
.video-frame { display:block; min-height:430px; background:#284d51; position:relative; overflow:hidden; box-shadow:0 26px 80px rgba(0,0,0,.3); }
.video-frame img { width:100%; height:100%; min-height:430px; object-fit:cover; display:block; transition:.4s; }
.video-frame:hover img { transform:scale(1.025); }
.video-frame:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%,rgba(4,15,18,.6)); }
.video-placeholder { display:grid; place-items:center; background:linear-gradient(140deg,#21484d,#0c2228); }
.placeholder-word { font:400 clamp(64px,8vw,115px)/1 Georgia,serif; color:rgba(255,255,255,.07); transform:rotate(-8deg); }
.play { position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--ink); z-index:2; box-shadow:0 0 0 12px rgba(239,180,62,.15); }
.play i { font-style:normal; margin-left:4px; }
.latest-pill { position:absolute; left:24px; top:24px; z-index:2; background:white; color:var(--ink); padding:10px 13px; font-size:9px; text-transform:uppercase; letter-spacing:.17em; font-weight:700; }
.verse-card { position:absolute; right:-40px; bottom:-54px; z-index:3; width:245px; padding:26px 28px 22px; background:var(--gold); color:var(--ink); }
.verse-card span { font:55px/20px Georgia; opacity:.45; }
.verse-card p { font:17px/1.35 Georgia,serif; margin:10px 0 14px; }
.verse-card small { font-size:9px; text-transform:uppercase; letter-spacing:.17em; font-weight:700; }
.messages { padding:120px 7vw; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:55px; }
.dark { color:#8c671d; }
h2 { font:400 clamp(40px,4.5vw,64px)/1.05 Georgia,serif; letter-spacing:-.04em; margin:0; }
.dark-link { color:var(--ink); border-color:#abb1ae; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:42px 24px; }
.video-card { display:block; }
.thumb { aspect-ratio:16/9; overflow:hidden; background:#d8d5cc; position:relative; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:.35s; }
.video-card:hover .thumb img { transform:scale(1.035); }
.thumb span { position:absolute; left:18px; bottom:18px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--gold); font-size:10px; }
.card-kicker { color:#9a7220; text-transform:uppercase; letter-spacing:.17em; font-size:9px; font-weight:700; margin:20px 0 10px; }
.video-card h3 { font:400 23px/1.25 Georgia,serif; margin:0 0 12px; }
.video-card time { color:#6d7776; font-size:11px; }
.loading-line { height:20px; margin-top:20px; width:80%; background:#ddd9d0; animation:pulse 1.5s infinite; }.loading-line.short{width:45%;margin-top:10px}@keyframes pulse{50%{opacity:.45}}
.shorts-section { background:var(--ink); color:white; padding:110px 7vw 120px; overflow:hidden; }
.shorts-section .section-heading { align-items:end; }
.section-intro { max-width:350px; color:#9aacaa; font:16px/1.6 Georgia,serif; margin:0; }
.shorts-row { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)) 150px; gap:18px; align-items:stretch; }
.short-card { aspect-ratio:9/15; min-height:320px; position:relative; overflow:hidden; background:#21434a; }
.short-card:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 38%,rgba(4,15,18,.9)); }
.short-card img { width:100%; height:100%; object-fit:cover; transition:.35s; }
.short-card:hover img { transform:scale(1.04); }
.short-card h3 { position:absolute; z-index:2; left:16px; right:16px; bottom:18px; margin:0; font:400 16px/1.28 Georgia,serif; }
.short-number { position:absolute; z-index:2; left:14px; top:15px; font:10px Georgia,serif; color:var(--gold); }
.short-play { position:absolute; z-index:2; right:13px; top:13px; width:32px; height:32px; border-radius:50%; background:var(--gold); color:var(--ink); display:grid; place-items:center; font-size:8px; }
.short-loading div { height:100%; background:linear-gradient(110deg,#1d3a40 25%,#2b5056 45%,#1d3a40 65%); background-size:250% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer{to{background-position:-250% 0}}
.all-shorts { min-height:320px; border:1px solid rgba(255,255,255,.18); padding:22px 18px; display:flex; flex-direction:column; justify-content:space-between; color:var(--gold); }
.all-shorts span { font:19px Georgia,serif; color:white; }.all-shorts strong{font-size:28px;align-self:flex-end}.all-shorts small{text-transform:uppercase;letter-spacing:.16em;font-size:8px}
.about { background:var(--teal); color:white; padding:105px 7vw; display:grid; grid-template-columns:1.2fr 1fr; gap:8vw; align-items:start; }
.about-copy { padding-top:44px; }
.about-copy p { font:18px/1.7 Georgia,serif; color:#b9c8c7; margin:0 0 28px; }
.connect { text-align:center; padding:120px 20px; background:#ece8dc; }
.connect .eyebrow { justify-content:center; }
.connect>p:not(.eyebrow) { color:#66706f; margin:22px auto 30px; max-width:520px; font:16px/1.6 Georgia,serif; }
.contact-support { background:var(--teal); color:white; padding:110px 7vw; display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; align-items:center; }
.contact-heading>p:last-child { color:#b9c8c7; font:17px/1.65 Georgia,serif; max-width:520px; margin:24px 0 0; }
.contact-actions { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-card { appearance:none; border:1px solid rgba(255,255,255,.22); border-radius:0; background:transparent; color:white; min-height:260px; padding:28px; text-align:left; font:inherit; cursor:pointer; display:flex; flex-direction:column; transition:.25s ease; }
.contact-card:hover,.contact-card:focus-visible { transform:translateY(-4px); border-color:var(--gold); outline:none; }
.contact-card small { color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.contact-card strong { font:400 29px/1.15 Georgia,serif; margin:22px 0 auto; }
.contact-card span { color:#b9c8c7; font-size:12px; line-height:1.5; display:flex; justify-content:space-between; gap:18px; align-items:end; }
.contact-card i { color:var(--gold); font:normal 22px/1 Arial,sans-serif; }
.giving-card { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.giving-card small,.giving-card i { color:var(--ink); }.giving-card span{color:#4e471f}
footer { background:var(--ink); color:white; min-height:145px; padding:38px 5.5vw; display:flex; align-items:center; justify-content:space-between; }
footer>p { font-size:10px; color:#8ea09f; letter-spacing:.08em; }
@media(max-width:1100px){.shorts-row{grid-template-columns:repeat(3,1fr)}.all-shorts{aspect-ratio:9/15}}
@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:65px}.hero-media{margin-top:15px}.verse-card{right:10px}.video-grid{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr}.about-copy{grid-column:1}.site-header{padding:0 22px}.hero,.messages,.about,.shorts-section,.contact-support{padding-left:24px;padding-right:24px}.shorts-row{display:flex;overflow-x:auto;padding-bottom:18px}.short-card,.all-shorts{min-width:210px}.contact-support{grid-template-columns:1fr}.contact-actions{max-width:650px}}
@media(max-width:560px){.site-header>.button{display:none}.hero{min-height:0;padding-bottom:80px}.hero-actions{align-items:flex-start;flex-direction:column}.video-frame,.video-frame img{min-height:260px}.play{width:60px;height:60px}.verse-card{position:relative;right:auto;bottom:auto;width:85%;margin:-30px 0 0 auto}.section-heading{align-items:flex-start;gap:30px;flex-direction:column}.video-grid{grid-template-columns:1fr}.about{grid-template-columns:1fr}.about-copy{grid-column:1;padding-top:0}.contact-actions{grid-template-columns:1fr}.contact-card{min-height:220px}footer{gap:30px;align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}