*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0a;
  --bg2:#111;
  --bg3:#1a1a1a;
  --gold:#c9a96e;
  --gold-light:#e8d5a8;
  --gold-dark:#8a6d3b;
  --cream:#f5f0e8;
  --white:#fff;
  --gray:#888;
  --gray-light:#bbb;
  --font-display:'Playfair Display',serif;
  --font-body:'DM Sans',sans-serif;
  --font-accent:'Bebas Neue',sans-serif;
}

html{scroll-behavior:smooth;font-size:16px}

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  overflow-x:hidden;
  line-height:1.6;
}

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

/* ========================
   NOISE OVERLAY
======================== */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:128px 128px;
  opacity:.5;
}

/* ========================
   NAVIGATION
======================== */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:1.5rem 4rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(180deg,rgba(10,10,10,.95) 0%,transparent 100%);
  transition:all .4s;
}

nav.scrolled{
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(20px);
  padding:1rem 4rem;
}

.nav-logo{
  font-family:var(--font-accent);
  font-size:1.8rem;
  letter-spacing:.15em;
  color:var(--gold);
}

.nav-logo span{color:var(--cream)}

.nav-links{display:flex;gap:2.5rem;align-items:center}

.nav-links a{
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gray-light);
  transition:color .3s;
  font-weight:500;
}

.nav-links a:hover{color:var(--gold)}

.nav-cta{
  background:var(--gold)!important;
  color:var(--bg)!important;
  padding:.7rem 1.6rem;
  border-radius:0;
  font-weight:700;
  transition:all .3s!important;
}

.nav-cta:hover{
  background:var(--gold-light)!important;
  transform:translateY(-2px);
}

/* MOBILE NAV TOGGLE */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  padding:4px;
  z-index:200;
}

.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:var(--cream);
  transition:all .3s;
}

.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ========================
   HERO
======================== */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  padding:0 4rem;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-bg-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.78) 42%,rgba(10,10,10,.45) 100%);
}

.hero-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  max-width:1200px;
}

.hero::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:80vw;height:80vw;
  background:radial-gradient(circle,rgba(201,169,110,.08) 0%,transparent 60%);
  pointer-events:none;
  z-index:1;
}

.hero::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:200px;
  background:linear-gradient(transparent,var(--bg));
  pointer-events:none;
  z-index:2;
}

.hero-overline{
  font-family:var(--font-accent);
  font-size:1rem;
  letter-spacing:.5em;
  color:var(--gold);
  opacity:0;
  animation:fadeUp .8s .3s forwards;
}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(3rem,8vw,7.5rem);
  font-weight:900;
  line-height:1;
  margin:.5rem 0 1.5rem;
  max-width:900px;
  opacity:0;
  animation:fadeUp .8s .5s forwards;
}

.hero-title em{
  font-style:italic;
  color:var(--gold);
  font-weight:400;
}

.hero-sub{
  font-size:1.15rem;
  color:var(--gray-light);
  max-width:500px;
  line-height:1.8;
  font-weight:300;
  opacity:0;
  animation:fadeUp .8s .7s forwards;
}

.hero-btns{
  display:flex;
  gap:1.2rem;
  margin-top:2.5rem;
  opacity:0;
  animation:fadeUp .8s .9s forwards;
}

.btn-primary{
  background:var(--gold);
  color:var(--bg);
  padding:1rem 2.5rem;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:all .3s;
  position:relative;
  overflow:hidden;
}

.btn-primary:hover{
  background:var(--gold-light);
  transform:translateY(-2px);
  box-shadow:0 10px 40px rgba(201,169,110,.2);
}

.btn-outline{
  background:transparent;
  color:var(--cream);
  padding:1rem 2.5rem;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2);
  cursor:pointer;
  transition:all .3s;
}

.btn-outline:hover{
  border-color:var(--gold);
  color:var(--gold);
}

/* ========================
   SCROLL INDICATOR
======================== */
.scroll-indicator{
  position:absolute;
  bottom:3rem;left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  opacity:0;
  animation:fadeUp .8s 1.2s forwards;
}

.scroll-indicator span{
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gray);
}

.scroll-line{
  width:1px;
  height:40px;
  background:linear-gradient(var(--gold),transparent);
  animation:scrollPulse 2s infinite;
}

/* ========================
   MARQUEE
======================== */
.marquee-wrap{
  padding:3rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

.marquee{
  display:flex;
  gap:3rem;
  animation:marquee 20s linear infinite;
  width:max-content;
}

.marquee-item{
  font-family:var(--font-accent);
  font-size:1.5rem;
  letter-spacing:.3em;
  color:rgba(255,255,255,.1);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:3rem;
}

.marquee-item::after{
  content:'◆';
  font-size:.5rem;
  color:var(--gold-dark);
}

/* ========================
   SECTION COMMON
======================== */
section{padding:8rem 4rem}

.section-label{
  font-family:var(--font-accent);
  font-size:.85rem;
  letter-spacing:.5em;
  color:var(--gold);
  margin-bottom:1rem;
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:1.5rem;
}

.section-title em{
  font-style:italic;
  color:var(--gold);
  font-weight:400;
}

/* ========================
   ABOUT
======================== */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6rem;
  align-items:center;
}

.about-visual{
  position:relative;
  height:min(600px,70vw);
  min-height:320px;
  overflow:hidden;
}

.about-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.85) contrast(1.05);
  background:var(--bg3);
  display:block;
}

.about-accent{
  position:absolute;
  top:-2rem;left:-2rem;
  width:100px;height:100px;
  border-top:2px solid var(--gold);
  border-left:2px solid var(--gold);
}

.about-accent2{
  position:absolute;
  bottom:-2rem;right:-2rem;
  width:100px;height:100px;
  border-bottom:2px solid var(--gold);
  border-right:2px solid var(--gold);
}

.about-text p{
  color:var(--gray-light);
  margin-bottom:1.5rem;
  font-weight:300;
  font-size:1.05rem;
  line-height:1.9;
}

.about-stats{
  display:flex;
  gap:3rem;
  margin-top:2.5rem;
  padding-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.08);
}

.stat-num{
  font-family:var(--font-accent);
  font-size:2.8rem;
  color:var(--gold);
  line-height:1;
}

.stat-label{
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gray);
  margin-top:.3rem;
}

/* ========================
   SERVICES
======================== */
.services-section{background:var(--bg2)}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:4rem;
}

.service-card{
  background:var(--bg);
  padding:3rem 2.5rem;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
  transition:all .5s;
  cursor:default;
}

.service-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;
  transition:opacity .5s;
}

.service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(201,169,110,.15);
}

.service-card:hover::before{opacity:1}

.service-num{
  font-family:var(--font-accent);
  font-size:4rem;
  color:rgba(201,169,110,.1);
  line-height:1;
  margin-bottom:1rem;
}

.service-name{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:.8rem;
}

.service-desc{
  color:var(--gray);
  font-size:.95rem;
  line-height:1.7;
  font-weight:300;
  margin-bottom:1.5rem;
}

.service-price{
  font-family:var(--font-accent);
  font-size:1.3rem;
  letter-spacing:.1em;
  color:var(--gold);
}

/* ========================
   GALLERY
======================== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:4rem;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  background:var(--bg3);
  display:flex;
  align-items:center;
  justify-content:center;
}

.gallery-item:has(.gallery-img){
  aspect-ratio:1;
  min-height:0;
}

.gallery-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.gallery-item-beard .gallery-img{
  filter:grayscale(1) contrast(1.12) brightness(.88);
}

.gallery-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(transparent 50%,rgba(10,10,10,.7));
  opacity:0;
  transition:opacity .5s;
}

.gallery-item:hover .gallery-overlay{opacity:1}

/* ========================
   EXPERIENCE
======================== */
.experience{background:linear-gradient(135deg,var(--bg2) 0%,var(--bg) 100%)}

.exp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3rem;
  margin-top:4rem;
}

.exp-item{text-align:center;padding:2rem}

.exp-icon{
  width:60px;height:60px;
  border:1px solid rgba(201,169,110,.3);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
  color:var(--gold);
  font-size:1.3rem;
  transition:all .3s;
}

.exp-item:hover .exp-icon{
  background:var(--gold);
  color:var(--bg);
  border-color:var(--gold);
}

.exp-title{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:.5rem;
}

.exp-desc{
  color:var(--gray);
  font-size:.9rem;
  font-weight:300;
  line-height:1.7;
}

/* ========================
   TESTIMONIAL
======================== */
.testimonial-section{
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.testimonial-block{
  text-align:center;
  max-width:700px;
  margin:0 auto;
}

.quote-mark{
  font-family:var(--font-display);
  font-size:6rem;
  color:var(--gold);
  line-height:1;
  opacity:.3;
  margin-bottom:-1rem;
}

.testimonial-text{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-style:italic;
  line-height:1.8;
  font-weight:400;
  color:var(--cream);
}

.testimonial-author{
  margin-top:2rem;
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gray);
}

.testimonial-author strong{
  color:var(--gold);
  font-weight:700;
}

/* ========================
   BOOKING CTA
======================== */
.booking-cta{
  text-align:center;
  position:relative;
  overflow:hidden;
  padding:10rem 4rem;
}

.booking-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(201,169,110,.06) 0%,transparent 70%);
}

.booking-cta .section-title{
  font-size:clamp(2.5rem,5vw,4.5rem);
  max-width:700px;
  margin:0 auto 1.5rem;
}

.booking-cta p{
  color:var(--gray-light);
  font-size:1.1rem;
  margin-bottom:2.5rem;
  font-weight:300;
}

.booking-cta .btn-primary{
  font-size:1rem;
  padding:1.2rem 3rem;
}

/* ========================
   FOOTER
======================== */
footer{
  padding:4rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
}

.footer-brand .nav-logo{
  font-size:2rem;
  margin-bottom:1rem;
  display:inline-block;
}

.footer-brand p{
  color:var(--gray);
  font-size:.9rem;
  max-width:280px;
  line-height:1.7;
}

.footer-col h4{
  font-family:var(--font-accent);
  font-size:.85rem;
  letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:1.5rem;
}

.footer-col a{
  display:block;
  color:var(--gray);
  font-size:.9rem;
  margin-bottom:.8rem;
  transition:color .3s;
}

.footer-col a:hover{color:var(--cream)}

.footer-bottom{
  grid-column:1/-1;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.04);
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  color:var(--gray);
}

/* ========================
   ANIMATIONS
======================== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes scrollPulse{
  0%,100%{opacity:.3}
  50%{opacity:1}
}

@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s cubic-bezier(.22,1,.36,1);
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ========================
   RESPONSIVE — TABLET
======================== */
@media(max-width:1024px){
  nav{padding:1.2rem 2rem}
  nav.scrolled{padding:1rem 2rem}
  section{padding:5rem 2rem}
  .about{grid-template-columns:1fr;gap:3rem}
  .about-visual{height:400px}
  .services-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .exp-grid{grid-template-columns:1fr 1fr}
  footer{grid-template-columns:1fr 1fr}
  .hero{padding:0 2rem}
  .booking-cta{padding:7rem 2rem}
}

/* ========================
   RESPONSIVE — MOBILE
======================== */
@media(max-width:640px){
  nav{padding:1rem 1.5rem}
  nav.scrolled{padding:.8rem 1.5rem}

  .nav-toggle{display:flex}

  .nav-links{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(10,10,10,.98);
    backdrop-filter:blur(30px);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2rem;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s;
  }

  .nav-links.open{
    opacity:1;
    pointer-events:all;
  }

  .nav-links a{font-size:1.2rem;letter-spacing:.3em}

  section{padding:4rem 1.5rem}
  .hero{padding:0 1.5rem}
  .hero-btns{flex-direction:column;gap:.8rem}
  .hero-btns .btn-primary,
  .hero-btns .btn-outline{width:100%;text-align:center}
  .services-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .gallery-item{min-height:200px}
  .exp-grid{grid-template-columns:1fr}
  .about-stats{flex-direction:column;gap:1.5rem}
  footer{grid-template-columns:1fr;padding:3rem 1.5rem}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
  .booking-cta{padding:5rem 1.5rem}
  .testimonial-text{font-size:1.2rem}
}