/* The mosaic spans the title and part of the two columns below, so it lives on the
   wrapper rather than on .hero. Both sections need a stacking context to sit above it. */
.hero-wrap{position:relative;overflow:hidden;}
.hero{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:72px 28px 60px;
}
.hero-mosaic{
  position:absolute;inset:0;
  background:url('/static/mosaic.jpg') top center/cover no-repeat;
  filter:brightness(.28) blur(2px);
  /* The blur bleeds transparency in from the edges, so overscale to cover it. */
  transform:scale(1.05);
  mask-image:linear-gradient(to bottom,#000 44%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000 44%,transparent 92%);
}
.hero-title{
  position:relative;
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem,8.5vw,5.6rem);
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 4px 34px rgba(0,0,0,.9);
}
.hero-cols{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:start;
  max-width:1180px;margin:0 auto;
  padding:12px 28px 84px;
}
.hero-intro p{
  margin:0 0 18px;
  color:var(--text);
  font-size:1.02rem;line-height:1.8;
  max-width:52ch;
}
.scroll-cue{
  display:block;
  margin-top:20px;
  text-align:center;
  color:var(--gold);
  font-size:1.7rem;line-height:1;
  animation:scroll-cue-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(7px);}
}
.hero-cols .deck-input{
  max-width:none;margin:0;padding:0;
}

.feature{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:360px;
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
.feature + .feature{margin-top:36px;}
/* Soft copper halo behind the whole block, no hard edges. */
.feature::before{
  content:"";
  position:absolute;inset:4% 10%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(201,145,60,.16),transparent 72%);
  filter:blur(46px);
  pointer-events:none;
}
.feature-art{
  position:absolute;top:15%;bottom:15%;left:0;
  width:45%;
  background-size:cover;background-position:center;
  border-radius:var(--radius);
  filter:saturate(.5) brightness(.62) contrast(1.04);
  mask-image:linear-gradient(to right,#000 38%,transparent 94%);
  -webkit-mask-image:linear-gradient(to right,#000 38%,transparent 94%);
}
/* Re-tints the desaturated screenshot to copper so it reads as part of the page. */
.feature-art::after{
  content:"";
  position:absolute;inset:0;
  background:var(--gold);
  mix-blend-mode:color;
  opacity:.34;
  border-radius:inherit;
}
.feature-art-1{background-image:url('/static/landing_1.jpg');}
.feature-art-2{background-image:url('/static/landing_2.jpg');}
.feature-art-3{background-image:url('/static/landing_3.jpg');}

.feature-copy{
  position:relative;
  grid-column:2;
  padding:48px 0;
}
.feature-copy h2{
  font-family:var(--font-display);font-weight:700;
  color:var(--gold);
  margin:0 0 12px;
  font-size:clamp(1.5rem,3.2vw,2.2rem);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.feature-copy p{
  margin:0;
  color:var(--text);
  font-size:1rem;line-height:1.7;
  max-width:40ch;
}

.feature.reverse .feature-art{
  left:auto;right:0;
  mask-image:linear-gradient(to left,#000 38%,transparent 94%);
  -webkit-mask-image:linear-gradient(to left,#000 38%,transparent 94%);
}
.feature.reverse .feature-copy{grid-column:1;justify-self:end;}
.feature.reverse .feature-copy p{margin-left:auto;}

.ad-bottom{margin:104px auto 0;}

.site-footer{
  margin-top:72px;
  border-top:1px solid var(--gold-dim);
  padding:44px 28px 32px;
}
.footer-top{
  display:flex;justify-content:space-between;
  gap:48px;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;
}
.footer-name{
  font-family:var(--font-display);font-weight:700;
  color:var(--gold);
  font-size:1.1rem;letter-spacing:.05em;
}
.footer-brand p{
  margin:10px 0 0;
  color:var(--text-muted);
  font-size:.82rem;line-height:1.6;
  max-width:44ch;
}
.footer-links{display:flex;gap:56px;flex-wrap:wrap;}
.footer-links h3{
  margin:0 0 10px;
  font-family:var(--font-body);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);
}
.footer-links ul{margin:0;padding:0;list-style:none;}
.footer-links li + li{margin-top:7px;}
.footer-links a{
  color:var(--text);text-decoration:none;
  font-size:.85rem;
  transition:color .15s ease;
}
.footer-links a:hover{color:var(--gold);}
.footer-bottom{
  max-width:1180px;margin:36px auto 0;
  padding-top:22px;
  border-top:1px solid var(--gold-dim);
}
.footer-bottom p{
  margin:0;
  color:var(--text-muted);
  font-size:.74rem;line-height:1.65;
}
.footer-bottom p + p{margin-top:10px;}

@media (max-width:880px){
  .hero-cols{grid-template-columns:1fr;gap:40px;padding-bottom:56px;}
  .feature{grid-template-columns:1fr;min-height:0;padding:0 24px;}
  .feature + .feature{margin-top:28px;}
  .feature::before{inset:0 4%;}
  .feature-art{
    position:relative;
    top:auto;bottom:auto;
    width:100%;height:210px;
    mask-image:linear-gradient(to bottom,#000 42%,transparent 98%);
    -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 98%);
  }
  .feature.reverse .feature-art{
    right:auto;
    mask-image:linear-gradient(to bottom,#000 42%,transparent 98%);
    -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 98%);
  }
  .feature-copy,
  .feature.reverse .feature-copy{grid-column:1;justify-self:start;padding:24px 0 0;}
  .feature.reverse .feature-copy p{margin-left:0;}
  .ad-bottom{margin-top:64px;}
  .footer-links{gap:36px;}
}