/* Mobile-first polish: clean logo, hero cards, consistent plan CTAs. 2026-11-13 */
/* 1) Hero + footer logo: shown clean, exactly as drawn. The old grey sky plate around the peaks was
   removed from the image itself, so no glow, shadow, pulse or filter is applied on top of it. */
.herologo,
.hero .herologo,
.hero:has(.hbg[style*="hero-peaks-green"]) .herologo,
footer .brand .flogo{
  filter:none!important;
  animation:none!important;
  -webkit-mask:none!important;mask:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}

/* 2) Hero CTAs: clear gold primary vs ghost secondary */
.hero .row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin-top:28px;
}
.hero .row .btn{
  flex:1 1 auto!important;
  width:100%;
  justify-content:center;
  text-align:center;
  border-radius:999px!important;
  padding:15px 22px!important;
  font-size:.95rem!important;
  font-weight:600!important;
  letter-spacing:.04em!important;
}
.hero .btn:not(.ghost),
.hero .row .btn:not(.ghost){
  color:#1a1308!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45)!important;
  background:linear-gradient(180deg,#f7e6bd 0%,#e8c99d 45%,#b89659 100%)!important;
  border:0!important;
  box-shadow:inset 0 1px 0 #fff8e6,inset 0 -2px 0 rgba(157,117,48,.6),0 0 0 1px #9d7530,0 12px 24px -10px rgba(0,0,0,.7),0 0 22px rgba(232,201,157,.35)!important;
}
.hero .btn.ghost,
.hero .row .btn.ghost{
  color:#f7ecd4!important;
  text-shadow:none!important;
  background:linear-gradient(180deg,rgba(230,237,243,.10),rgba(9,20,50,.32))!important;
  border:1px solid rgba(232,201,157,.62)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}
@media (min-width:700px){
  .hero .row{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
  }
  .hero .row .btn{width:auto;flex:0 1 auto}
}

/* 2b) Local / Transparent / Yours cards */
.hero .meta{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  max-width:none!important;
  width:100%!important;
  margin-top:28px!important;
  border:0!important;
  padding:0!important;
}
.hero .meta > div,
.hero .hcard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  max-width:none!important;
  width:100%!important;
  box-sizing:border-box;
  padding:18px 18px 16px!important;
  border-radius:16px!important;
  background:linear-gradient(165deg,rgba(247,230,189,.12),rgba(9,20,50,.48) 58%,rgba(7,15,39,.55))!important;
  border:1px solid rgba(232,201,157,.38)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(0,0,0,.28),0 18px 36px -18px rgba(0,0,0,.75),0 0 28px rgba(232,201,157,.16)!important;
}
.hero .meta > div:before,
.hero .hcard:before{display:none!important;content:none!important;background:none!important;box-shadow:none!important}
.hero .hcard-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  margin:0 0 4px;
  border-radius:50%;
  color:#e8c99d;
  background:radial-gradient(circle at 30% 25%,rgba(247,230,189,.28),rgba(12,26,65,.35));
  border:1px solid rgba(232,201,157,.55);
  box-shadow:0 0 16px rgba(232,201,157,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
.hero .hcard-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero .meta b,
.hero .hcard b{
  display:block;
  margin:0!important;
  color:#e8c99d!important;
  font-family:var(--caps),Cinzel,serif!important;
  font-size:1rem!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  line-height:1.2;
}
.hero .meta p,
.hero .hcard p,
.hero .meta div,
.hero .hcard{
  color:#e8eaef!important;
  font-size:16px!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}
.hero .hcard p{
  margin:0;
  color:#e8eaef!important;
  font-size:16px!important;
  line-height:1.5!important;
}
@media (max-width:639px){
  .hero .meta,
  .hero .content > .meta{
    grid-template-columns:1fr!important;
    gap:12px!important;
    max-width:none!important;
  }
  .hero .meta > div,
  .hero .hcard{font-size:16px!important;padding:18px 18px 16px!important}
  .hero .meta b,
  .hero .hcard b{font-size:1rem!important;letter-spacing:.16em!important}
}
@media (min-width:900px){
  .hero .meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
}

/* Disable the old CSS intro on cards; GSAP rise-in takes over (and skips if reduced motion). */
@media (prefers-reduced-motion:no-preference){
  .hero .content > .meta > div{animation:none!important}
}
@media (prefers-reduced-motion:reduce){
  .hero .content > .meta > div,
  .hero .hcard{animation:none!important;opacity:1!important;transform:none!important}
}

/* 2c) Concept-illustration credit: discreet caption under the art, not a floating pill */
.hero > .credit{display:none!important}
.credit, span.credit, .ftag{
  position:static!important;
  right:auto!important;
  bottom:auto!important;
  display:block;
  margin:8px 0 0;
  padding:0!important;
  border-radius:0!important;
  background:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  font-size:.66rem!important;
  letter-spacing:.06em;
  color:rgba(232,201,157,.45)!important;
  z-index:auto;
}
.fimg .ftag, .fimg > .ftag{margin-top:10px}

/* 3) Every plan Choose button uses one gold primary style, including Ministry Plus / featured */
.plan .btn,
.plan .btn.ghost,
.plan .btn.ghost.ink,
.plan.feat .btn,
.plans .plan .btn,
.plans .plan .btn.ghost,
.plans .plan .btn.ghost.ink,
.plan .btn.plan-cta,
a.btn.plan-cta{
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%;
  box-sizing:border-box;
  margin-top:6px;
  padding:14px 22px!important;
  border-radius:999px!important;
  color:#1a1308!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45)!important;
  background:linear-gradient(180deg,#f7e6bd 0%,#e8c99d 45%,#b89659 100%)!important;
  border:0!important;
  box-shadow:inset 0 1px 0 #fff8e6,inset 0 -2px 0 rgba(157,117,48,.6),0 0 0 1px #9d7530,0 10px 22px -10px rgba(0,0,0,.65),0 0 18px rgba(232,201,157,.28)!important;
  font-weight:600!important;
  letter-spacing:.04em!important;
}
.light .plan .btn,
.light .plan .btn.ghost,
.light .plan .btn.ghost.ink,
.light .plan.feat .btn,
section.light .plans .plan .btn.ghost{
  color:#1a1308!important;
  background:linear-gradient(180deg,#f7e6bd 0%,#e8c99d 45%,#b89659 100%)!important;
  border:0!important;
  box-shadow:inset 0 1px 0 #fff8e6,inset 0 -2px 0 rgba(157,117,48,.6),0 0 0 1px #9d7530,0 10px 22px -10px rgba(0,0,0,.65)!important;
}

/* Settled visibility so a mid-animation capture or a missed tween never leaves cards invisible */
.hero .hcard,.hero .meta > div{opacity:1}
.hero .hcard p,.hero .meta p{color:#f2f4f8!important;font-size:16px!important}
.hero .hcard b,.hero .meta b{color:#f0d7a0!important}

/* CSS rise-in so cards always end visible even if GSAP is late. */
@keyframes twHcardIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:no-preference){
  .hero .hcard,.hero .meta > div{
    animation:twHcardIn .9s cubic-bezier(.2,.7,.2,1) both;
  }
  .hero .hcard:nth-child(1),.hero .meta > div:nth-child(1){animation-delay:.08s}
  .hero .hcard:nth-child(2),.hero .meta > div:nth-child(2){animation-delay:.18s}
  .hero .hcard:nth-child(3),.hero .meta > div:nth-child(3){animation-delay:.28s}
}
@media (prefers-reduced-motion:reduce){
  .hero .hcard,.hero .meta > div{animation:none!important;opacity:1!important;transform:none!important}
}
html.settled .hero .hcard,
html.settled .hero .meta > div,
html.settled .hero .content > .meta > div{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}

/* ===== 2026-11-13 mfix2: hero cards alignment + no scroll dimming ===== */
/* Mountain / .band section is intentionally unchanged from live c4139d51. */

@media (max-width:820px){
  /* Equal left/right inset, measured from the viewport, not a 92vw wrap
     inside a possibly-wider containing block. Matches the nav inset. */
  .hero,
  .hero.photo{
    overflow-x:clip;
  }
  .hero .wrap.content,
  .hero .content.wrap,
  .hero .content{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:24px!important;
    padding-right:24px!important;
    box-sizing:border-box!important;
  }
  .hero .row,
  .hero .meta{
    width:100%;
    max-width:100%!important;
    box-sizing:border-box;
    margin-left:0;
    margin-right:0;
  }
  .hero .row .btn,
  .hero .hcard,
  .hero .meta > div{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin-left:0;
    margin-right:0;
  }
  /* Title, icon and body share a left edge (hero {text-align:center} was
     centering the card copy while headings stayed left). */
  .hero .meta,
  .hero .hcard,
  .hero .meta > div{
    text-align:left!important;
    align-items:flex-start!important;
  }
  .hero .hcard p,
  .hero .meta p{
    text-align:left!important;
  }

  /* Keep the cards and the gap before the marquee from sitting in a
     near-solid navy pit. Do not dim the homepage photo at the top. */
  .hero.photo:after,
  .hero:after{
    background:linear-gradient(180deg,rgba(6,10,20,.18) 0%,rgba(6,10,20,.10) 50%,rgba(6,10,20,.28) 100%)!important;
  }
  .hero:has(.hbg[style*="hero-peaks-green"]) .hbg:after{
    height:10%!important;
    background:linear-gradient(180deg,transparent,rgba(7,15,39,.35))!important;
  }
  .hero:has(.hbg[style*="hero-peaks-green"]) .hshade{
    background:linear-gradient(180deg,rgba(7,15,39,.16) 0%,rgba(7,15,39,.04) 58%,rgba(7,15,39,.26) 100%)!important;
  }
  .hero.photo,
  .hero:has(.hbg[style*="hero-peaks-green"]){
    padding-bottom:48px!important;
  }
}

/* Never let a scroll tween leave the hero CTAs/cards faded */
.hero .content,
.hero .wrap.content{
  opacity:1!important;
}
