/* ===========================================================
   Elite Fade Lounge Barbershop — Shared Stylesheet
   Palette: black / white / gray, minimal red accent
=========================================================== */

:root{
  --black:#0c0c0c;
  --near-black:#141414;
  --panel:#1b1b1b;
  --white:#ffffff;
  --gray-050:#f6f6f6;
  --gray-100:#eeeeee;
  --gray-300:#c9c9c9;
  --gray-500:#8a8a8a;
  --gray-700:#4a4a4a;
  --red:#8f1c17;
  --red-bright:#b3241c;
  --font-display:'Oswald',sans-serif;
  --font-body:'Inter',sans-serif;
  --container:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--white);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin:0 0 .5em;
  line-height:1.1;
}
p{line-height:1.7;color:var(--gray-300);}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--red-bright);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:32px;
  height:2px;
  background:var(--red-bright);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:.85rem;
  padding:15px 32px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
}
.btn-primary{background:var(--white);color:var(--black);}
.btn-primary:hover{background:var(--red-bright);color:var(--white);}
.btn-outline{border-color:rgba(255,255,255,.4);color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--black);}
.btn-dark{background:var(--panel);color:var(--white);border-color:var(--gray-700);}
.btn-dark:hover{background:var(--red-bright);border-color:var(--red-bright);}
.btn-small{padding:11px 22px;font-size:.75rem;}
.btn-block{width:100%;}

/* ---------- Announcement bar ---------- */
.announce-bar{
  background:var(--red-bright);
  color:var(--white);
  text-align:center;
  padding:10px 20px;
}
.announce-bar a{
  color:var(--white);
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:1px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.announce-bar a:hover{text-decoration:underline;}
.announce-bar .dot{opacity:.6;}

/* ---------- Header / Nav ---------- */
.site-header{
  background:var(--black);
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:var(--container);
  margin:0 auto;
}
.logo-mark{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-mark img{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--white);
  padding:3px;
  flex:none;
  object-fit:contain;
}
.logo-text{
  font-family:var(--font-display);
  color:var(--white);
  font-size:1.15rem;
  letter-spacing:1px;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.logo-text span{
  font-size:.6rem;
  color:var(--gray-500);
  letter-spacing:3px;
  font-family:var(--font-body);
  text-transform:uppercase;
}
.nav-links{
  display:flex;
  gap:32px;
}
.nav-links a{
  color:var(--gray-300);
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:8px 0;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--white);
  border-color:var(--red-bright);
}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{width:24px;height:2px;background:var(--white);display:block;}

/* ---------- Hero ---------- */
.hero{
  background:var(--black);
  color:var(--white);
  position:relative;
  overflow:hidden;
  min-height:640px;
  display:flex;
  align-items:center;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.55;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(12,12,12,.96) 20%, rgba(12,12,12,.55) 65%, rgba(12,12,12,.3) 100%);
}
.hero-watermark-track{
  position:absolute;
  left:0;
  right:0;
  bottom:-2vw;
  z-index:0;
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
}
.hero-watermark-track span{
  display:inline-block;
  font-family:var(--font-display);
  font-size:14vw;
  font-weight:700;
  color:rgba(255,255,255,.045);
  letter-spacing:4px;
  padding-right:4vw;
  animation:marquee 26s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .hero-watermark-track span{animation:none;}
}
.hero-content{
  position:relative;
  z-index:1;
  padding:110px 0 90px;
}
.hero h1{
  font-size:clamp(2.4rem,5vw,4rem);
  margin-bottom:22px;
}
.hero h1 .accent{color:var(--red-bright);}
.hero p.lead{
  color:var(--gray-300);
  font-size:1.05rem;
  max-width:480px;
  margin-bottom:32px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px;align-items:center;}
.hero-call{
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--white);
  border-bottom:1px solid var(--gray-700);
  padding-bottom:2px;
}
.hero-rating{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--gray-300);
  font-size:.9rem;
}
.stars{color:var(--red-bright);letter-spacing:2px;}

/* Astronaut seal badge — floats on hero / used as section accent */
.astro-seal{
  position:relative;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  overflow:hidden;
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  border:4px solid var(--red-bright);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.astro-seal img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.logo-mark img{overflow:hidden;}
.astro-seal-wrap{
  position:absolute;
  right:60px;
  bottom:40px;
  z-index:2;
}
@media (max-width:960px){
  .astro-seal-wrap{right:20px;bottom:20px;}
  .astro-seal{width:100px;height:100px;padding:10px;border-width:3px;}
}
@media (max-width:480px){
  .astro-seal-wrap{right:14px;bottom:14px;}
  .astro-seal{width:78px;height:78px;padding:8px;}
}

/* ---------- Stats bar ---------- */
.stats-bar{
  background:var(--near-black);
  color:var(--white);
  padding:34px 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  gap:20px;
}
.stat-num{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--white);
}
.stat-num .accent{color:var(--red-bright);}
.stat-label{
  font-size:.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-top:4px;
}

/* ---------- Section basics ---------- */
section{padding:86px 0;}
.section-light{background:var(--near-black);}
.section-dark{background:var(--black);color:var(--white);}
.section-dark p{color:var(--gray-300);}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}

/* ---------- Detail cards / photo strip ---------- */
.card-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.detail-card{
  background:var(--panel);
  padding:36px 30px;
  border:1px solid rgba(255,255,255,.08);
}
.detail-card .num{
  font-family:var(--font-display);
  font-size:.75rem;
  color:var(--red-bright);
  letter-spacing:2px;
  margin-bottom:16px;
  display:block;
}
.detail-card h3{font-size:1.15rem;}

.photo-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:36px;
}
.photo-strip.split-2{grid-template-columns:1.3fr 1fr;}
@media (max-width:720px){
  .photo-strip.split-2{grid-template-columns:1fr;}
}
.photo-strip .strip-item{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--panel);
}
.photo-strip .strip-item img{width:100%;height:100%;object-fit:cover;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--black);
  color:var(--white);
  text-align:center;
  padding:90px 0;
}
.cta-band h2{font-size:clamp(1.8rem,4vw,2.8rem);}
.cta-band p{color:var(--gray-300);max-width:480px;margin:0 auto 30px;}

/* ---------- Services ---------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.svc-card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.svc-icon{
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(179,36,28,.12);
  color:var(--red-bright);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:1.1rem;
  margin-bottom:6px;
}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.svc-duration{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--red-bright);
  display:block;
  margin-bottom:6px;
}
.svc-top h3{font-size:1.1rem;margin-bottom:0;color:var(--white);}
.svc-price{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--white);
  white-space:nowrap;
}
.svc-card p{font-size:.92rem;margin:0;}
.svc-note{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* ---------- Gallery ---------- */
.filter-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:34px;
}
.filter-btn{
  font-family:var(--font-display);
  font-size:.75rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:9px 20px;
  border:1px solid var(--gray-300);
  background:transparent;
  cursor:pointer;
  border-radius:2px;
}
.filter-btn.active,
.filter-btn:hover{background:var(--black);color:var(--white);border-color:var(--black);}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.gallery-item{
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--gray-100);
  position:relative;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.placeholder-photo{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--panel),var(--near-black));
  color:var(--gray-500);
  font-family:var(--font-display);
  font-size:.75rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-align:center;
  padding:10px;
  border:1px dashed var(--gray-700);
}

/* ---------- Barbers ---------- */
.barber-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.barber-card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
}
.barber-photo{
  aspect-ratio:4/5;
  background:var(--near-black);
  overflow:hidden;
}
.barber-photo img{width:100%;height:100%;object-fit:cover;}
.barber-info{padding:22px 22px 26px;}
.barber-fullname{
  font-size:.75rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-bottom:4px;
}
.barber-alias-name{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:2px;
}
.barber-real-name{
  font-size:.85rem;
  color:var(--gray-500);
  margin-bottom:8px;
}
.barber-role{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--red-bright);
  margin-bottom:14px;
  display:block;
}
.barber-specialty{
  font-size:.85rem;
  color:var(--gray-300);
  margin-bottom:18px;
}
.barber-links{display:flex;gap:10px;flex-wrap:wrap;}
.ig-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  color:var(--gray-300);
  border:1px solid var(--gray-700);
  padding:9px 14px;
  border-radius:2px;
}
.ig-link:hover{border-color:var(--white);color:var(--white);}

/* ---------- About / values ---------- */
.about-hero{
  background:var(--black);
  color:var(--white);
  padding:0;
  position:relative;
}
.about-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:520px;
}
.about-split-text{
  padding:90px 60px 90px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-split-photo{
  background:var(--panel);
  overflow:hidden;
}
.about-split-photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:420px;}
.about-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:560px;}
.script-accent{
  font-family:'Brush Script MT', cursive;
  font-style:italic;
  color:var(--red-bright);
  font-size:1.3rem;
  margin-top:18px;
  display:block;
}
.mission-block{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  margin-top:36px;
  align-items:stretch;
}
.mission-photo{aspect-ratio:1/1;overflow:hidden;background:var(--panel);}
.mission-photo img{width:100%;height:100%;object-fit:cover;}
.mission-text{
  background:var(--panel);
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mission-text h4{color:var(--white);font-size:1rem;margin-bottom:10px;}
.mission-text p{font-size:.9rem;margin:0;}
@media (max-width:960px){
  .about-split{grid-template-columns:1fr;}
  .about-split-text{padding:60px 24px;}
  .mission-block{grid-template-columns:1fr;}
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.value-card{
  text-align:center;
  padding:30px 18px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
}
.value-card h4{font-size:1rem;color:var(--white);}
.value-card p{font-size:.88rem;}

.creator-block{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px;
  align-items:center;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  padding:40px;
}
.creator-block h3{color:var(--white);}
.creator-photo{
  aspect-ratio:1/1;
  background:var(--near-black);
  overflow:hidden;
  border-radius:50%;
}
.creator-photo img{width:100%;height:100%;object-fit:cover;}

/* ---------- Instagram embed ---------- */
.ig-embed-wrap{
  max-width:540px;
  margin:0 auto;
}
.ig-embed-wrap iframe{
  margin:0 auto !important;
}

/* ---------- Reviews ---------- */
.reviews-strip{
  background:var(--near-black);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:60px 0;
  text-align:center;
}
.reviews-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--panel);
  border:1px solid var(--gray-700);
  color:var(--white);
  padding:16px 28px;
  margin-bottom:22px;
}
.reviews-badge .stars{font-size:1.2rem;}
.reviews-badge strong{font-family:var(--font-display);font-size:1.2rem;}
#google-reviews-widget{max-width:900px;margin:0 auto;}
.widget-note{
  font-size:.78rem;
  color:var(--gray-500);
  margin-top:18px;
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}
.info-row{
  display:flex;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.info-row span:last-child{color:var(--gray-300);}
.info-row .ic{
  font-family:var(--font-display);
  color:var(--red-bright);
  font-size:.8rem;
  letter-spacing:1.5px;
  width:90px;
  flex:none;
  text-transform:uppercase;
}
.map-wrap{margin-top:30px;border:1px solid rgba(255,255,255,.08);filter:grayscale(60%) invert(92%) contrast(90%);}
.map-wrap iframe{width:100%;height:280px;border:0;display:block;}

.form-field{margin-bottom:18px;}
.form-field label{
  display:block;
  font-family:var(--font-display);
  font-size:.75rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--gray-500);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--gray-700);
  font-family:var(--font-body);
  font-size:.95rem;
  border-radius:2px;
  background:var(--panel);
  color:var(--white);
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--black);
  color:var(--gray-300);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  margin-bottom:46px;
}
.footer-grid h4{
  color:var(--white);
  font-size:.85rem;
  letter-spacing:1.5px;
  margin-bottom:18px;
}
.footer-grid p{color:var(--gray-500);font-size:.9rem;}
.footer-grid a{
  display:block;
  color:var(--gray-500);
  font-size:.9rem;
  padding:6px 0;
}
.footer-grid a:hover{color:var(--white);}
.footer-social{display:flex;gap:14px;margin-top:16px;}
.footer-social a{
  width:36px;height:36px;
  border:1px solid var(--gray-700);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:.78rem;
  color:var(--gray-500);
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:30px;}
  .card-grid-3,.svc-grid,.barber-grid,.photo-strip{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .creator-block{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero{min-height:auto;}
  .hero-watermark-track span{font-size:20vw;}
}
@media (max-width:720px){
  .nav-links{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--black);
    flex-direction:column;
    padding:20px 24px;
    gap:18px;
    display:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:flex;}
  .card-grid-3,.svc-grid,.barber-grid,.gallery-grid,.values-grid,.photo-strip{grid-template-columns:1fr;}
  .form-row-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .logo-text{font-size:.95rem;}
}

/* ---------- Lead Capture Modal ---------- */
.lead-modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.lead-modal.open{display:flex;}
.lead-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.8);}
.lead-modal-box{
  position:relative;
  background:var(--near-black);
  border:1px solid rgba(255,255,255,.1);
  max-width:420px;
  width:100%;
  padding:34px 30px 30px;
  border-radius:2px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lead-modal-close{
  position:absolute;
  top:12px;right:14px;
  background:none;
  border:0;
  color:var(--gray-500);
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  padding:6px;
}
.lead-modal-close:hover{color:var(--white);}
.lead-modal-box h3{margin-bottom:10px;}
.lead-modal-sub{font-size:.9rem;margin-bottom:22px;color:var(--gray-300);}
.lead-form-error{color:var(--red-bright);font-size:.85rem;margin:-6px 0 14px;}
#lead-submit-btn[disabled]{opacity:.6;cursor:not-allowed;}