html,body.landing{height:100%;overflow-y:auto;overflow-x:hidden;background:#171512;}
.gateway{
  position:relative;width:100%;display:flex;
  height:100vh;   /* fallback for browsers without dvh support */
  min-height:100vh;
}
@supports (height:100dvh){
  .gateway{height:100dvh;min-height:100dvh;}
}
.gateway-brand{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;flex-direction:column;align-items:center;
  padding:34px 24px 0;pointer-events:none;
  text-align:center;color:var(--white);
}
.gateway-brand .mark-row{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;}
.gateway-brand .mark-row .dot{width:7px;height:7px;border-radius:50%;background:var(--white);}
.gateway-brand .tagline{
  font-family:var(--font-display);font-size:1.1rem;font-style:italic;margin-top:10px;opacity:.85;
}

.panel{
  position:relative;flex:1;overflow:hidden;cursor:pointer;
  transition:flex-basis .7s var(--ease),flex-grow .7s var(--ease);
  display:flex;align-items:center;
  min-width:0;
}
.gateway.hover-church .panel-church{flex-grow:1.5;}
.gateway.hover-church .panel-charity{flex-grow:.75;}
.gateway.hover-charity .panel-charity{flex-grow:1.5;}
.gateway.hover-charity .panel-church{flex-grow:.75;}

.panel-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.06);
  transition:transform .8s var(--ease);
}
.panel-church .panel-bg{
  background:
    radial-gradient(120% 90% at 25% 0%,rgba(176,134,60,.55),transparent 60%),
    linear-gradient(200deg,#2b3348 0%,#161c29 60%,#0d1119 100%);
}
.panel-charity .panel-bg{
  background:
    radial-gradient(120% 90% at 75% 0%,rgba(193,80,46,.55),transparent 60%),
    linear-gradient(200deg,#2c1f18 0%,#221510 60%,#150c09 100%);
}
.panel:hover .panel-bg{transform:scale(1.1);}
.panel-bg::after{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 34px);
}
.panel-scrim{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(9,8,7,.75) 0%,rgba(9,8,7,.15) 55%,rgba(9,8,7,.05) 100%);
}
.panel-content{
  position:relative;z-index:5;color:var(--white);
  display:flex;flex-direction:column;align-items:flex-start;
  padding:230px 40px 60px;box-sizing:border-box;
  width:100%;max-width:440px;
  opacity:0;transform:translateY(16px);
  animation:rise .8s var(--ease) forwards;
}
.panel-church .panel-content{animation-delay:.15s;}
.panel-charity .panel-content{animation-delay:.3s;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
.panel-content .eyebrow{color:rgba(255,255,255,.7);margin-bottom:.7em;}
.panel-content h2{
  font-size:clamp(1.9rem,3.1vw,2.5rem);color:var(--white);
  max-width:14ch;overflow-wrap:break-word;margin-bottom:.5em;
}
.panel-content p{color:rgba(255,255,255,.78);max-width:34ch;margin-bottom:1.7em;}
.panel-content .hero-actions{margin-top:48px;}
.panel-church .btn-solid{background:var(--church);border-color:var(--church);}
.panel-church .btn-solid:hover{background:#c79a4c;border-color:#c79a4c;}
.panel-charity .btn-solid{background:var(--charity);border-color:var(--charity);}
.panel-charity .btn-solid:hover{background:#d4653f;border-color:#d4653f;}

.gateway-divider{
  position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:rgba(255,255,255,.18);z-index:10;pointer-events:none;
  transition:left .7s var(--ease);
}
.gateway.hover-church .gateway-divider{left:60%;}
.gateway.hover-charity .gateway-divider{left:40%;}

/* cinematic transition overlay, shown on click before navigating */
.gateway.launching .panel:not(.launch-target){opacity:0;transition:opacity .5s var(--ease);}
.gateway.launching .launch-target{flex-grow:12;}
.gateway.launching .launch-target .panel-content{opacity:0;transition:opacity .35s var(--ease);}
.gateway.launching .launch-target .panel-bg{transform:scale(1.22);}

@media(max-width:820px){
  html,body.landing{height:auto;min-height:100%;}
  .gateway{
    flex-direction:column;
    height:auto;min-height:0;
  }
  /* On mobile the brand row no longer needs to hover full-width over the
     panels — let it sit in normal flow, sized to just its own text. */
  .gateway-brand{
    position:static;
    padding:22px 24px 14px;
  }
  .gateway-brand .tagline{margin-top:6px;font-size:1rem;}

  /* Each half stacks in normal flow and is only as tall as its own
     content — no more forcing a full screen of empty space per panel. */
  .panel{
    flex:none;width:100%;
    min-height:0;
  }
  .panel-content{padding:40px 28px 44px;text-align:center;max-width:none;align-items:center;}
  .panel-content p{margin-inline:auto;}
  .panel-content h2{font-size:clamp(1.6rem,6vw,2.1rem);}
  .panel-content .hero-actions{margin-top:22px;}
  .gateway-divider{display:none;}
  .gateway.hover-church .panel-church,.gateway.hover-charity .panel-charity{flex-grow:1;}
}

@media (prefers-reduced-motion: reduce){
  .panel,.panel-bg,.panel-content{transition:none;animation:none;opacity:1;transform:none;}
}

/* =========================================================
   Background music toggle
   ========================================================= */
.music-toggle{
  position:absolute;right:22px;bottom:22px;z-index:30;
  display:flex;align-items:center;gap:9px;
  background:rgba(9,8,7,.55);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);color:var(--white);
  border-radius:999px;padding:11px 18px 11px 15px;cursor:pointer;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.music-toggle:hover{background:rgba(9,8,7,.75);transform:translateY(-2px);}
.music-toggle .music-icon{font-size:1rem;line-height:1;}
.music-toggle[aria-pressed="true"] .music-icon{animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.7;}50%{opacity:1;}}
@media(max-width:820px){
  .music-toggle{right:16px;bottom:16px;padding:10px 16px 10px 13px;}
  .music-toggle .music-label{display:none;}
}