/* ═══════════════════════════════════════════════════════════════
   /about and /contact
   Built from the site's own components (giveaways.css + rewards.css:
   VIP landing hero, marble stat tiles, VIP cards). This file only adds
   each page's hero art, the "Meet Justin" block and the contact form.
   ═══════════════════════════════════════════════════════════════ */

/* ── hero art (replaces the VIP treasure vault) ── */
.ab-landing--about::before{
  background:
    radial-gradient(70% 80% at 50% 40%, rgba(8,4,3,.55), rgba(8,4,3,.2) 70%),
    linear-gradient(180deg, rgba(8,4,3,.35) 0%, rgba(8,4,3,.7) 100%),
    url('/assets/img/home/hero-header.webp') 62% 14% / cover no-repeat;
}
.ab-landing--contact{ min-height: 380px; }
.ab-landing--contact::before{
  background:
    radial-gradient(70% 80% at 50% 40%, rgba(8,4,3,.6), rgba(8,4,3,.25) 70%),
    linear-gradient(180deg, rgba(8,4,3,.35) 0%, rgba(8,4,3,.72) 100%),
    url('/assets/img/referrals/hero.webp') 60% 22% / cover no-repeat;
}

/* kicker — same style as the other landings */
.ab-eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: 12px; font-weight: 900; letter-spacing: .26em; text-transform: uppercase;
  color: #ffd56a; text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.ab-eyebrow::before, .ab-eyebrow::after{
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffd56a);
}
.ab-eyebrow::after{ background: linear-gradient(90deg, #ffd56a, transparent); }

.ab-landing .gw-landing__title-text{ filter: drop-shadow(0 4px 18px rgba(0,0,0,.75)); }
.ab-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0 26px; }

/* ── Meet Justin ── */
.ab-meet{ max-width: 880px; margin: 0 auto; }
.ab-meet--photo{
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: center;
  max-width: 1040px;
}
.ab-meet__photo{
  margin: 0; position: relative;
  border: 14px solid transparent;
  border-image: url('/assets/img/stats/inner-bg.webp') 46 fill / 14px stretch;
  filter: drop-shadow(0 0 16px rgba(255,190,70,.22)) drop-shadow(0 16px 30px rgba(0,0,0,.6));
}
.ab-meet__photo img{ display: block; width: 100%; height: auto; border-radius: 6px; }
.ab-meet__card{ align-items: stretch; padding-top: 26px; padding-bottom: 24px; }
.ab-meet__p{
  margin: 0 0 14px;
  font-size: 15.5px; line-height: 1.8; color: rgba(248,241,228,.86);
}
.ab-meet__p strong{ color: #ffd56a; }
.ab-socials{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ab-socials a{
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;
  color: #f0c76b; background: rgba(0,0,0,.4); border: 1px solid rgba(255,213,106,.35);
  transition: border-color .15s ease, color .15s ease;
}
.ab-socials a:hover{ color: #ffe39a; border-color: #ffd56a; }

/* ── closing call to action (About) ── */
.ab-cta{ margin-top: 34px; text-align: center; }
.ab-cta__text{ margin: 0 0 4px; font-size: 15px; color: rgba(248,241,228,.8); }
.ab-cta .ab-actions{ margin-bottom: 0; }

/* ═════════════ CONTACT ═════════════ */
.ab-contact{ scroll-margin-top: 90px; }
.ab-contact__grid{
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start;
}

/* form card — forms read best left-aligned, even where the section centers text */
.ab-contact__grid, .ab-form, .ab-ways, .ab-way, .ab-quick{ text-align: left; }
.ab-form{ align-items: stretch; padding: 28px 28px 26px; gap: 0; }
.ab-form__title{ margin: 0 0 6px; font-size: 22px; font-weight: 950; color: #fff; }
.ab-form__lead{ margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: rgba(248,241,228,.72); }
.ab-form__fields{ display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ab-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-field{ display: flex; flex-direction: column; gap: 7px; }
.ab-field label{
  font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #e3bd72;
}
.ab-field input, .ab-field select, .ab-field textarea{
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  font: inherit; font-size: 15px; color: #fff;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,213,106,.28); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ab-field textarea{ resize: vertical; min-height: 150px; line-height: 1.6; }
.ab-field select option{ background: #15110c; }
.ab-field input:focus, .ab-field select:focus, .ab-field textarea:focus{
  outline: none; border-color: #ffd56a; box-shadow: 0 0 0 3px rgba(255,213,106,.15);
}
.ab-submit{ align-self: flex-start; margin-top: 4px; }
.ab-note{ margin: 2px 0 0; font-size: 12px; color: rgba(248,241,228,.55); }

/* spam trap — off-screen for people, visible to bots */
.ab-hp{ position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ab-error{
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: #ffc9c4; background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.35);
}

/* sent state */
.ab-sent{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px; }
.ab-sent__icon{
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%;
  color: #1b1206; background: linear-gradient(180deg, #ffe9a8 0%, #ffd166 50%, #d99a2b 100%);
  box-shadow: 0 0 22px rgba(255,190,70,.4);
}
.ab-sent__icon svg{ width: 30px; height: 30px; }

/* other ways to reach us */
.ab-ways{ display: flex; flex-direction: column; gap: 14px; }
.ab-way{ flex-direction: row !important; align-items: center !important; gap: 14px !important; text-decoration: none; }
.ab-way .rwv-card__icon{ flex: 0 0 auto; }
.ab-way .rwv-card__desc{ margin-top: 3px; }
.ab-quick{ align-items: stretch; }
.ab-quick__list{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.ab-quick__list a{ color: #f0c76b; text-decoration: none; font-size: 14px; font-weight: 700; }
.ab-quick__list a::before{ content: "→ "; color: rgba(255,213,106,.6); }
.ab-quick__list a:hover{ color: #ffe39a; }

/* ── responsive ── */
@media (max-width: 900px){
  .ab-contact__grid{ grid-template-columns: minmax(0, 1fr); }
  .ab-meet--photo{ grid-template-columns: minmax(0, 1fr); }
  .ab-meet__photo{ max-width: 320px; margin: 0 auto; }
}
@media (max-width: 560px){
  .ab-row{ grid-template-columns: minmax(0, 1fr); }
  .ab-form{ padding: 22px 18px; }
  .ab-submit{ align-self: stretch; }
  .ab-eyebrow{ font-size: 10.5px; letter-spacing: .2em; }
}