/* ═══ BARBI3R — Black & White ═══ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --black:#000;
  --white:#fff;
  --gray:#888;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-italic:'Playfair Display',Georgia,serif;
  --max-w:720px;
}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

.container{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

/* ─── Hero ─── */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
}

.hero-title{
  font-family:var(--font);
  font-size:clamp(64px,20vw,200px);
  font-weight:900;
  letter-spacing:-0.07em;
  line-height:0.82;
  text-transform:uppercase;
  margin-bottom:clamp(12px,2vw,24px);
}

.hero-tagline{
  font-family:var(--font-italic);
  font-size:clamp(18px,3vw,36px);
  font-style:italic;
  color:var(--gray);
  letter-spacing:0.02em;
}

.accent-italic{font-style:italic}

.hero-cta{
  margin:clamp(32px,5vw,56px) 0 clamp(48px,7vw,80px);
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ─── Navigation ─── */
.nav-bar{
  display:flex;
  gap:clamp(20px,4vw,48px);
  justify-content:center;
  flex-wrap:wrap;
}

.nav-bar a{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gray);
  transition:color .3s;
}

.nav-bar a:hover{color:var(--white)}

/* ─── Buttons ─── */
.btn-primary,.btn-secondary{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  padding:14px 36px;
  transition:opacity .3s;
}

.btn-primary{
  background:var(--white);
  color:var(--black);
}

.btn-secondary{
  border:1px solid var(--white);
  color:var(--white);
}

.btn-primary:hover,.btn-secondary:hover{opacity:.7}

/* ─── Sections ─── */
.section{
  padding:clamp(80px,14vw,160px) 0;
}

.section-head{
  margin-bottom:48px;
}

.section-title{
  font-family:var(--font);
  font-size:clamp(36px,7vw,72px);
  font-weight:900;
  letter-spacing:-0.05em;
  line-height:0.92;
  text-transform:uppercase;
}

.section-sub{
  font-size:13px;
  font-weight:400;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gray);
  margin-top:8px;
}

/* ─── Services ─── */
.services-list{
  border-top:1px solid var(--gray);
}

.service-row{
  display:flex;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.service-name{
  font-size:15px;
  font-weight:400;
  text-transform:lowercase;
}

.service-dash{
  flex:1;
  height:1px;
  border-bottom:1px dashed rgba(255,255,255,.15);
  margin:0 20px;
}

.service-price{
  font-family:var(--font);
  font-size:18px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ─── Reel ─── */
.reel-section{
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.reel-wrapper{
  display:flex;
  justify-content:center;
}

.reel-wrapper iframe{
  width:100%;
  max-width:400px;
  height:710px;
  border:none;
}

/* ─── Hours ─── */
.hours-list{
  max-width:440px;
}

.hours-row{
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:15px;
}

.hours-row:last-child{border-bottom:none}

.hours-row.closed span:last-child{
  color:var(--gray);
  font-style:italic;
}

/* ─── Contact ─── */
.contact-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}

.contact-loc{
  font-size:15px;
  color:rgba(255,255,255,.7);
}

.contact-ig{
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:opacity .3s;
}

.contact-ig:hover{opacity:.7}

.contact-ig::before{
  content:'';
  display:inline-block;
  width:18px;
  height:18px;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ─── Footer ─── */
footer{
  padding:48px 0 32px;
  text-align:center;
}

.footer-tagline{
  font-family:var(--font-italic);
  font-size:18px;
  font-style:italic;
  color:var(--gray);
  margin-bottom:12px;
}

.footer-tagline span{font-style:italic}

.footer-copy{
  font-size:11px;
  color:rgba(255,255,255,.3);
  letter-spacing:0.05em;
}

/* ─── Responsive ─── */
@media(max-width:640px){
  .reel-wrapper iframe{height:600px}
  .service-row{padding:16px 0}
}