/* ===========================================================
   VALL STUDIO BOUTIQUE — Design system
   Palette:
     --cream:     #F7F1E9  (base background)
     --blush:     #ECE0D4  (secondary surface)
     --cafe:      #A7856C  (brand / primary accent)
     --cafe-dark: #7A5F49  (hover / deep accent)
     --espresso:  #2E2119  (text / near-black)
     --sand:      #DCC9B4  (borders, hairlines)
   Type:
     Display  — 'Fraunces' (warm, high-contrast serif, echoes the logo)
     Body     — 'Work Sans' (quiet, warm-neutral grotesk)
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --cream: #F7F1E9;
  --blush: #ECE0D4;
  --cafe: #A7856C;
  --cafe-dark: #7A5F49;
  --espresso: #2E2119;
  --sand: #DCC9B4;
  --max: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

h1,h2,h3,h4{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  margin: 0;
  color: var(--espresso);
  letter-spacing: -0.01em;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ---------- Diamond signature motif ---------- */
.diamond{
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--cafe);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.diamond-divider{
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px 0;
}
.diamond-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sand);
}
.diamond-divider .eyebrow{
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cafe-dark);
}

/* ---------- Header ---------- */
header.site{
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,241,233,0.97);
  border-bottom: 1px solid var(--sand);
}
header.site .bar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  max-width: var(--max); margin: 0 auto;
}
header.site .brand{
  display: flex; align-items: center; gap: 10px;
}
header.site .brand img{ height: 42px; width: auto; }
nav.primary{ display: flex; align-items: center; gap: 30px; }
nav.primary a{
  font-size: 14px; letter-spacing: 0.03em;
  color: var(--espresso);
  position: relative;
  padding: 4px 0;
}
nav.primary a.active{ color: var(--cafe-dark); }
nav.primary a::after{
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--cafe-dark);
  transition: width 0.25s ease;
}
nav.primary a:hover::after,
nav.primary a.active::after{ width: 100%; }

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cafe-dark); color: var(--cream);
  padding: 12px 22px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
  border: 1px solid var(--cafe-dark);
}
.btn:hover{ background: var(--espresso); border-color: var(--espresso); transform: translateY(-1px); }
.btn.ghost{
  background: transparent; color: var(--espresso); border: 1px solid var(--espresso);
}
.btn.ghost:hover{ background: var(--espresso); color: var(--cream); }

.menu-toggle{ display:none; background:none; border:none; cursor:pointer; }
.menu-toggle svg{ width:26px; height:26px; }

@media (max-width: 860px){
  nav.primary{
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 78%; max-width: 340px;
    background: var(--cream); flex-direction: column; align-items: flex-start;
    padding: 100px 30px 30px; gap: 26px;
    transform: translateX(100%); transition: transform 0.35s ease;
    border-left: 1px solid var(--sand);
    z-index: 200;
    box-shadow: -8px 0 30px rgba(46,33,25,0.18);
  }
  nav.primary.open{ transform: translateX(0); }
  nav.primary a{ font-size: 18px; }
  .menu-toggle{ display: block; position: relative; z-index: 210; }
  header.site .cta-desktop{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
}
.hero .wrap{
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.hero h1{
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.04;
}
.hero h1 em{ color: var(--cafe-dark); font-style: normal; }
.hero p.lead{
  margin-top: 22px; font-size: 17px; max-width: 46ch; color: #55463b;
}
.hero .cta-row{ display:flex; gap:14px; margin-top:32px; flex-wrap: wrap; }
.hero .figure{
  position: relative; border-radius: 4px 60px 4px 4px; overflow: hidden;
  aspect-ratio: 4/5;
}
.hero .figure img{ width:100%; height:100%; object-fit: cover; }
.hero .figure .tag{
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(247,241,233,0.92); backdrop-filter: blur(4px);
  padding: 10px 16px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  display:flex; align-items:center; gap:8px;
}

@media (max-width: 860px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero .figure{ order: -1; }
}

/* ---------- Sections ---------- */
section{ padding: 80px 0; }
section.tight{ padding: 56px 0; }
.section-head{ max-width: 620px; margin-bottom: 46px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 42px); }
.section-head p{ margin-top: 14px; color: #55463b; font-size: 16px; }

.bg-blush{ background: var(--blush); }
.bg-espresso{ background: var(--espresso); color: var(--cream); }
.bg-espresso h1, .bg-espresso h2, .bg-espresso h3{ color: var(--cream); }
.bg-espresso .section-head p{ color: #d8c9ba; }

/* ---------- Cards / grids ---------- */
.grid{ display: grid; gap: 26px; }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid.cols-3, .grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; }
}

.card{
  background: #fff; border: 1px solid var(--sand);
  border-radius: 6px; padding: 30px 26px;
}
.card h3{ font-size: 20px; margin-bottom: 10px; }
.card p{ color: #55463b; font-size: 14.5px; }
.card .price{
  margin-top: 16px; font-family: 'Fraunces', serif; font-size: 22px; color: var(--cafe-dark);
}
.book-mini{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color: var(--cafe-dark); font-weight:600; font-family:'Work Sans',sans-serif;
}
.book-mini:hover{ color: var(--espresso); }
.book-mini::after{ content:"→"; transition: transform .2s ease; }
.book-mini:hover::after{ transform: translateX(3px); }

.service-row{
  display: flex; justify-content: space-between; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--sand);
}
.service-row:last-child{ border-bottom: none; }
.service-row .info h3{ font-size: 21px; }
.service-row .info p{ margin-top: 6px; color: #55463b; font-size: 14.5px; max-width: 56ch; }
.service-row .price{
  font-family: 'Fraunces', serif; font-size: 22px; color: var(--cafe-dark);
  white-space: nowrap; text-align: right; min-width: 130px;
}
.service-row .price small{ display:block; font-family:'Work Sans',sans-serif; font-size: 11px; letter-spacing:.06em; text-transform:uppercase; color:#8a7565; margin-top:4px; }

/* ---------- Gallery ---------- */
.gallery{
  columns: 3 220px; column-gap: 18px;
}
.gallery figure{
  margin: 0 0 18px; break-inside: avoid; border-radius: 6px; overflow: hidden;
  position: relative;
}
.gallery img{ width: 100%; display:block; transition: transform .5s ease; }
.gallery figure:hover img{ transform: scale(1.04); }
.gallery figcaption{
  position: absolute; left:0; right:0; bottom:0;
  padding: 14px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(to top, rgba(46,33,25,.75), transparent);
}
@media (max-width: 700px){ .gallery{ columns: 2 160px; } }

/* ---------- Stats strip ---------- */
.stats{ display:flex; flex-wrap:wrap; gap: 40px; }
.stats .stat{ min-width: 140px; }
.stats .stat .num{ font-family:'Fraunces',serif; font-size: 40px; color: var(--cafe); }
.stats .stat .label{ font-size: 13px; letter-spacing:.04em; text-transform: uppercase; color:#8a7565; margin-top:4px; }

/* ---------- Team ---------- */
.team-card{ text-align:center; }
.team-photo{
  aspect-ratio: 1/1; border-radius: 50%; overflow:hidden;
  background: linear-gradient(135deg, var(--cafe), var(--sand));
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 20px; width: 190px;
  font-family:'Fraunces',serif; font-size: 44px; color:#fff;
}
.team-card h3{ font-size: 22px; }
.team-card .role{ font-size: 13px; letter-spacing:.06em; text-transform:uppercase; color: var(--cafe-dark); margin: 6px 0 12px; }
.team-card p.bio{ color:#55463b; font-size:14.5px; max-width: 40ch; margin: 0 auto; }

/* ---------- Values / icons list ---------- */
.value{ display:flex; gap:16px; }
.value .diamond{ margin-top: 8px; }
.value h4{ font-size: 17px; margin-bottom: 6px; }
.value p{ color:#55463b; font-size:14.5px; }

/* ---------- Timeline ---------- */
.timeline{ position: relative; padding-left: 26px; border-left: 1px solid var(--sand); }
.timeline .item{ position: relative; padding-bottom: 34px; }
.timeline .item:last-child{ padding-bottom: 0; }
.timeline .item::before{
  content:""; position:absolute; left:-31px; top:4px;
  width:9px; height:9px; background: var(--cafe); border-radius:50%;
  border: 3px solid var(--cream);
}
.timeline .item .year{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--cafe-dark); }
.timeline .item h4{ margin-top:4px; font-size:18px; }
.timeline .item p{ margin-top:6px; color:#55463b; font-size:14.5px; }

.treat-card{ display:flex; flex-direction:column; }
.treat-icon{
  width: 48px; height: 48px; border-radius: 50%; background: var(--blush);
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.treat-icon svg{ width: 22px; height: 22px; }
.treat-card h3{ font-size: 19px; }
.treat-card .price{ margin-top: auto; padding-top: 14px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-item{ display:flex; gap:16px; padding: 18px 0; border-bottom: 1px solid var(--sand); }
.contact-item:last-child{ border-bottom:none; }
.contact-item .ico{
  width:38px; height:38px; border-radius:50%; background: var(--blush);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-item h4{ font-size:15px; }
.contact-item p{ margin-top:4px; font-size:14px; color:#55463b; }
.contact-item a.link{ color: var(--cafe-dark); font-weight: 500; }

.map-box{
  border-radius: 8px; overflow:hidden; border:1px solid var(--sand); min-height: 320px;
}
.map-box iframe{ width:100%; height:100%; min-height:320px; border:0; }

.form-box{ background:#fff; border:1px solid var(--sand); border-radius:8px; padding:32px; }
.form-box label{ display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#8a7565; margin-bottom:6px; }
.form-box input, .form-box select, .form-box textarea{
  width:100%; padding:12px 14px; margin-bottom:18px;
  border:1px solid var(--sand); border-radius:5px; background: var(--cream);
  font-family:'Work Sans',sans-serif; font-size:14.5px; color: var(--espresso);
}
.form-box textarea{ min-height: 100px; resize: vertical; }
.form-box input:focus, .form-box select:focus, .form-box textarea:focus{
  outline: 2px solid var(--cafe); outline-offset: 1px;
}

/* ---------- Footer ---------- */
footer.site{ background: var(--espresso); color: var(--cream); padding: 56px 0 26px; }
footer.site .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
footer.site h4{ color: var(--cream); font-size: 14px; letter-spacing:.05em; text-transform:uppercase; margin-bottom: 16px; font-family:'Work Sans',sans-serif; }
footer.site p, footer.site a{ color: #cdbfae; font-size: 14px; }
footer.site ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
footer.site a:hover{ color: var(--cream); }
footer.site .brand-block{ display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
footer.site .brand-block img{ height: 34px; filter: brightness(0) invert(1); }
.social-row{ display:flex; gap:12px; margin-top: 18px; }
.social-row a{
  width: 38px; height: 38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color: #fff;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.social-row a:hover{ transform: translateY(-2px); filter: brightness(1.08); }
.social-row svg{ width:18px; height:18px; }
.social-row a.ico-whatsapp{ background: #25D366; }
.social-row a.ico-instagram{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-row a.ico-facebook{ background: #1877F2; }

footer.site .bottom{
  margin-top: 44px; padding-top: 22px; border-top: 1px solid #4a3a2c;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:#9a8676;
}
@media (max-width: 700px){ footer.site .foot-grid{ grid-template-columns: 1fr; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ padding: 60px 0 40px; }
.page-hero .eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--cafe-dark); }
.page-hero h1{ margin-top: 10px; font-size: clamp(32px, 4.6vw, 50px); }
.page-hero p{ margin-top: 14px; max-width: 60ch; color:#55463b; }

/* ---------- Filter pills (gallery) ---------- */
.pills{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 30px; }
.pill{
  padding: 9px 18px; border-radius:999px; border:1px solid var(--sand);
  font-size:13px; cursor:pointer; background:#fff; transition: all .2s ease;
}
.pill.active, .pill:hover{ background: var(--espresso); color: var(--cream); border-color: var(--espresso); }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--cafe); color: #fff; border-radius: 10px;
  padding: 54px 40px; text-align:center;
}
.cta-band h2{ color:#fff; font-size: clamp(26px,3.4vw,38px); }
.cta-band p{ margin-top:12px; color: #f3e7dc; }
.cta-band .btn{ background:#fff; color: var(--espresso); border-color:#fff; margin-top:24px; }
.cta-band .btn:hover{ background: var(--espresso); color:#fff; }