/* ==========================================================================
   HOMEPAGE — page-specific layout
   Depends on global.css, header.css, footer.css, responsive.css.
   ========================================================================== */

/* This page's desktop/tablet hero image already has "KEEP CLIMBING" baked
   into the approved photo asset. Suppress the shared CSS ghost-text
   component until mobile, where a separate clean (text-free) crop is used
   instead with the standard live ghost-text treatment. Every other page
   should NOT need this override — this is a one-off for the original
   approved hero image. */
.hero-ghost{display:none}
.hero-ghost-mobile{display:none}

@media (max-width:640px){
  .hero-ghost{display:none}
  .hero-ghost-mobile{
    display:block;
    width:calc(100% + 2 * var(--page-pad-mobile));
    margin:28px calc(-1 * var(--page-pad-mobile)) 0;
    font-family:var(--font-display);
    font-weight:400;
    font-size:68px;
    line-height:.86;
    letter-spacing:.035em;
    color:var(--ghost-color-strong);
    text-transform:uppercase;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
  }
}

.newsletter-card{
  margin-top:42px;
  max-width:650px;
}
.newsletter-card h2{
  margin:0 0 8px;
  font-size:clamp(30px,2.6vw,44px);
  letter-spacing:.08em;
}
.newsletter-card .body-text{margin-top:12px;max-width:620px;font-size:14px;color:var(--muted)}
.newsletter-form{
  margin-top:24px;
  display:flex;
  gap:14px;
  position:relative;
}
.newsletter-form .field{flex:1 1 auto}
.newsletter-form .button{flex:0 0 auto;white-space:nowrap}
.newsletter-form .form-status{
  position:absolute;
  bottom:-26px;
  left:0;
  margin:0;
  font-size:12px;
  color:var(--silver);
}
.scroll-hint{
  display:inline-block;
  margin-top:28px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.scroll-hint:hover{color:var(--gold)}

/* ===== About section ===== */
.about-section{
  position:relative;
  padding:clamp(72px,10vw,140px) var(--page-pad);
  overflow:hidden;
  isolation:isolate;
  scroll-margin-top:var(--header-h);
}
.about-background{position:absolute;inset:0;z-index:-2}
.about-background img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.about-grade{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(17,17,15,.86),rgba(17,17,15,.9) 30%,rgba(17,17,15,.93) 70%,rgba(17,17,15,.97));
}
.about-inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.about-inner h2{font-size:clamp(40px,5vw,64px)}
.about-rule{margin:24px auto 40px}
.about-inner .body-text{margin-top:18px;font-size:clamp(15px,1.3vw,18px);line-height:1.85}
.about-statement{
  margin-top:36px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.about-quote-rule{
  display:flex;align-items:center;gap:16px;
  margin:44px 0 28px;
}
.about-quote-rule::before,.about-quote-rule::after{
  content:"";flex:1;height:1px;background:rgba(211,162,46,.4);
}
.about-quote-rule span{color:var(--gold);font-size:28px;font-family:Georgia,serif}
.about-quote{margin:0}
.about-quote p{
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.4;
  color:var(--porcelain);
}
.about-quote cite{
  display:block;
  margin-top:18px;
  font-style:normal;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}

@media (max-width:640px){
  .newsletter-card{text-align:center}
  .newsletter-card h2{
    max-width:280px;
    margin-left:auto;margin-right:auto;
    font-size:44px;
  }
  .newsletter-card .body-text{
    max-width:300px;
    margin-left:auto;margin-right:auto;
  }
  .newsletter-form{
    flex-direction:column;
    max-width:300px;
    margin-left:auto;margin-right:auto;
  }
  .newsletter-form .button{width:100%}
  .newsletter-form .form-status{position:static;margin-top:8px}
  .scroll-hint{display:block;margin-top:20px}

  .about-inner h2{font-size:66px}
  .about-inner .body-text{font-size:13px;line-height:1.75;letter-spacing:.055em}
  .about-statement{margin-top:32px;font-size:13px}
  .about-quote-rule{margin-top:48px}
  .about-quote p{font-size:30px}
}