/* ==========================================================================
   Mocksville's House of Styles — shared stylesheet
   Used by every page (index, services, studio, contact, thank-you)
   ========================================================================== */

:root{
  --black: #000000;
  --black-alt: #0d0c0a;
  --gold: #cba17a;
  --gold-light: #e8cbae;
  --gold-dim: #7a5a3a;
  --cream: #f3ecdd;
  --stone: #948a78;
  --hairline: rgba(203,161,122,0.28);
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--cream);
  font-family:'Jost', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

body.nav-open{ overflow:hidden; }

h1,h2,h3, .script{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  letter-spacing:0.01em;
}

.eyebrow{
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
}

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

img{ max-width:100%; display:block; }

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 4vw;
  background:linear-gradient(to bottom, rgba(10,10,9,0.9), transparent);
}
.brandmark{
  display:flex; align-items:center; gap:0.7rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--cream);
  flex-shrink:1;
  min-width:0;
}
.brandmark span{ color:var(--gold); }
.brandmark img{
  height:38px; width:auto; flex-shrink:0;
}
.nav-links{
  display:flex; align-items:center; gap:2.6rem;
  font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--stone);
}
.nav-links a{ transition:color .3s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--gold-light); }
.nav-cta{
  border:1px solid var(--gold-dim);
  padding:0.55rem 1.3rem;
  font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold);
  transition:all .35s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }

.nav-links-cta{ display:none; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:none; border:none; cursor:pointer;
  z-index:110;
}
.nav-toggle span{
  display:block; width:100%; height:1px;
  background:var(--gold);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
  padding:6rem 6vw 4rem;
}
.ring{
  position:absolute;
  width:min(64vw, 640px); height:min(64vw, 640px);
  border:1px solid var(--hairline);
  border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-52%);
  pointer-events:none;
}
.ring::before{
  content:'';
  position:absolute; inset:-38px;
  border:1px solid rgba(201,162,75,0.12);
  border-radius:50%;
}
.hero-content{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.hero .eyebrow{ display:block; margin-bottom:1.6rem; }
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 4.6rem);
  line-height:1.06;
  color:var(--cream);
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-light);
}
.divider{
  width:220px; height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  margin:2rem auto;
}
.hero p{
  font-size:1rem; font-weight:300; color:var(--stone);
  max-width:480px; margin:0 auto 2.6rem;
  line-height:1.8;
}
.btn-primary{
  display:inline-block;
  background:var(--gold);
  color:var(--black);
  padding:1rem 2.6rem;
  font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  transition:all .35s ease;
  border:1px solid var(--gold);
  cursor:pointer;
  font-family:'Jost', sans-serif;
}
.btn-primary:hover{ background:var(--gold-light); border-color:var(--gold-light); letter-spacing:0.3em; }

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dim);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
}
.scroll-cue::after{
  content:''; width:1px; height:38px; background:linear-gradient(var(--gold-dim), transparent);
}

/* ---------- PAGE HEADER (inner pages) ---------- */
.page-header{
  position:relative;
  padding:11rem 6vw 5rem;
  text-align:center;
  overflow:hidden;
}
.page-header h1{
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  color:var(--cream);
  margin-top:0.8rem;
}
.page-header p{
  color:var(--stone);
  max-width:560px;
  margin:1.6rem auto 0;
  line-height:1.8;
  font-size:0.96rem;
  position:relative; z-index:2;
}

/* ---------- SERVICES (studio-menu style) ---------- */
.menu-section{
  padding:2rem 6vw 8rem;
  background:var(--black-alt);
  position:relative;
}
.menu-head{ text-align:center; margin-bottom:4.5rem; }
.menu-head h2{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-top:0.8rem;
  color:var(--cream);
}
.menu-category{ max-width:920px; margin:0 auto 5rem; }
.menu-category:last-child{ margin-bottom:0; }
.menu-category-title{
  font-size:1.5rem;
  color:var(--gold-light);
  text-align:center;
  margin-bottom:2.2rem;
  font-style:italic;
}
.menu-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 5rem;
}
.menu-col{ display:flex; flex-direction:column; }
.menu-item{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:1.5rem 0;
  border-bottom:1px solid var(--hairline);
  gap:1rem;
}
.menu-item:last-child{ border-bottom:none; }
.menu-item .name{
  font-family:'Cormorant Garamond', serif;
  font-size:1.25rem; color:var(--cream);
}
.menu-item .desc{
  display:block; font-family:'Jost',sans-serif; font-size:0.76rem;
  color:var(--stone); margin-top:0.3rem; font-weight:300; letter-spacing:0.01em;
}
.menu-item .price{
  font-family:'Jost', sans-serif; font-size:0.85rem; color:var(--gold);
  white-space:nowrap;
}
.menu-note{
  max-width:640px; margin:0 auto; text-align:center;
  color:var(--stone); font-size:0.85rem; line-height:1.8;
  padding-top:1rem;
}

/* ---------- FEATURE / ABOUT ---------- */
.feature{
  padding:9rem 6vw;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:5rem;
  align-items:center;
  max-width:1180px; margin:0 auto;
}
.feature.reverse{ grid-template-columns:1.1fr 0.9fr; }
.feature.reverse .feature-visual{ order:2; }
.feature-visual{
  aspect-ratio:4/5;
  border:1px solid var(--hairline);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--black-alt);
}
.feature-visual .monogram{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:7rem;
  color:var(--gold);
  opacity:0.85;
}
.feature-visual .photo-note{
  position:absolute; bottom:1rem; left:1rem; right:1rem;
  font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold-dim); text-align:center;
}
.feature-text .eyebrow{ margin-bottom:1.2rem; display:block; }
.feature-text h2{
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  line-height:1.2; margin-bottom:1.6rem;
  color:var(--cream);
}
.feature-text p{
  color:var(--stone); line-height:1.9; font-size:0.96rem; max-width:460px;
  margin-bottom:1.2rem;
}
.feature-text p:last-child{ margin-bottom:0; }

/* ---------- TEAM ---------- */
.team-section{
  padding:2rem 6vw 9rem;
  max-width:1180px; margin:0 auto;
}
.team-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem;
  margin-top:3rem;
}
.team-card{ text-align:center; }
.team-avatar{
  aspect-ratio:1/1;
  border:1px solid var(--hairline);
  background:var(--black-alt);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.4rem;
}
.team-avatar span{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:3.4rem;
  color:var(--gold);
  opacity:0.85;
}
.team-card h3{ font-size:1.4rem; color:var(--cream); margin-bottom:0.3rem; }
.team-card .role{ display:block; margin-bottom:0.9rem; }
.team-card p{ color:var(--stone); font-size:0.88rem; line-height:1.8; }

/* ---------- INFO STRIP (hours / location) ---------- */
.info-band{
  background:var(--black-alt);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:5rem 6vw;
}
.info-grid{
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem;
  text-align:center;
}
.info-grid h3{
  font-size:1.2rem; color:var(--gold-light); margin-bottom:0.9rem;
}
.info-grid p{ color:var(--stone); font-size:0.92rem; line-height:1.9; }

/* ---------- CTA BAND ---------- */
.cta-band{
  padding:7rem 6vw;
  text-align:center;
  background:var(--black-alt);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.cta-band h2{
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  color:var(--cream); margin-bottom:0.6rem;
}
.cta-band p{ color:var(--stone); margin-bottom:2.4rem; font-size:0.95rem; }

/* ---------- CONTACT ---------- */
.contact-section{
  padding:2rem 6vw 8rem;
  max-width:1100px; margin:0 auto;
}
.contact-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:5rem;
}
.contact-info h3{
  font-size:1.5rem; color:var(--cream); margin:2.2rem 0 0.6rem;
}
.contact-info h3:first-of-type{ margin-top:2.2rem; }
.contact-info p, .contact-info address{
  color:var(--stone); font-style:normal; font-size:0.94rem; line-height:1.9;
}
.contact-info a:hover{ color:var(--gold-light); }
.map-note{
  margin-top:2.6rem;
  aspect-ratio:16/10;
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:2rem;
  color:var(--gold-dim);
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  line-height:1.8;
}

/* ---------- FORM ---------- */
.form-field{ margin-bottom:1.6rem; }
.form-row{
  display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;
}
.form-field label{
  display:block;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--stone); margin-bottom:0.7rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  color:var(--cream);
  font-family:'Jost', sans-serif;
  font-weight:300;
  font-size:0.95rem;
  padding:0.7rem 0.1rem;
  transition:border-color .3s ease;
}
.form-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 8px) 1rem, calc(100% - 3px) 1rem;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.form-field select option{ background:var(--black-alt); color:var(--cream); }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:#5c564a; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-bottom-color:var(--gold);
}
.form-field.honeypot{ position:absolute; left:-9999px; top:-9999px; }
.form-note{
  font-size:0.78rem; color:var(--stone); margin-top:1.2rem; line-height:1.8;
}

/* ---------- FOOTER ---------- */
footer{
  padding:4.5rem 6vw 3rem;
  text-align:center;
}
.footer-brand{
  font-family:'Cormorant Garamond', serif;
  font-size:1.3rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cream); margin:0 auto 0.5rem;
  display:flex; flex-direction:column; align-items:center; gap:0.8rem;
  width:fit-content;
}
.footer-brand img{ height:52px; width:auto; }
.footer-links{
  display:flex; justify-content:center; flex-wrap:wrap; gap:2.2rem; margin:1.8rem 0;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone);
}
.footer-links a:hover{ color:var(--gold-light); }
.footer-fine{
  margin-top:2.4rem;
  font-size:0.68rem; color:#5c564a; letter-spacing:0.03em;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 780px){
  nav{ padding:1.4rem 5vw; gap:1rem; }
  .brandmark{ font-size:0.82rem; letter-spacing:0.13em; line-height:1.4; }
  .nav-toggle{ display:flex; flex-shrink:0; }
  .nav-cta{ display:none; }
  .nav-links{
    position:fixed; inset:0;
    background:var(--black);
    flex-direction:column; justify-content:center;
    gap:2.2rem;
    font-size:1rem;
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:transform .4s ease, opacity .4s ease, visibility .4s;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-links-cta{
    display:inline-block;
    margin-top:0.8rem;
    background:var(--gold); color:var(--black);
    padding:1rem 2.4rem; font-size:0.72rem; letter-spacing:.24em; text-transform:uppercase;
  }

  .menu-grid{ grid-template-columns:1fr; gap:0; }
  .feature, .feature.reverse{ grid-template-columns:1fr; padding:6rem 7vw; gap:3rem; }
  .feature.reverse .feature-visual{ order:0; }
  .feature-visual{ aspect-ratio:16/10; }

  .team-grid{ grid-template-columns:1fr; gap:3rem; max-width:340px; margin-left:auto; margin-right:auto; }
  .info-grid{ grid-template-columns:1fr; gap:2.6rem; }

  .contact-grid{ grid-template-columns:1fr; gap:4rem; }
  .form-row{ grid-template-columns:1fr; gap:0; }

  .page-header{ padding:9rem 7vw 4rem; }
}

@media (max-width: 480px){
  .hero{ padding:6rem 7vw 4rem; }
  .hero h1{ font-size:1.9rem; }
  .btn-primary{ padding:0.9rem 2rem; }
}