:root{
  --ink:#211712;
  --paper:#F3EBDD;
  --wine:#7B2432;
  --wine-dark:#521621;
  --gold:#B8925A;
  --gold-light:#D9BD8E;
  --blush:#E7D0C3;
  --line:rgba(33,23,18,0.14);
  --line-strong:rgba(33,23,18,0.28);
  --paper-onink:rgba(243,235,221,0.7);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:var(--paper);}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
button,input{font:inherit; color:inherit;}

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 32px; max-width:1160px; margin:0 auto;
}
.logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:600; font-size:19px;}
.logo svg{width:22px; height:22px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:2px;
  font-family:'Inter',sans-serif; font-weight:500; font-size:14.5px;
  background:var(--wine); color:var(--paper);
  border:1px solid var(--wine);
  cursor:pointer; text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.btn:hover{background:var(--wine-dark); transform:translateY(-1px);}
.btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line-strong);
}
.btn-ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--ink);}
.btn-gold:hover{ background:var(--gold-light); border-color:var(--gold-light);}

.hero{
  max-width:1160px; margin:0 auto; padding:56px 32px 90px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero h1{
  font-size:clamp(34px, 4.4vw, 54px); line-height:1.08; margin-bottom:26px;
}
.hero p.lede{
  font-size:18px; max-width:44ch; color:#4a3d34; margin-bottom:34px;
}
.hero-cta{display:flex; align-items:center; gap:18px; margin-bottom:44px;}
.hero-facts{
  display:flex; flex-direction:column; gap:14px;
  border-top:1px solid var(--line); padding-top:22px;
}
.hero-facts div{display:flex; gap:12px; font-size:14.5px; color:#5a4c41;}
.hero-facts span.mark{color:var(--wine); font-family:'Fraunces',serif; font-style:italic; flex:0 0 auto;}

.collage{ position:relative; height:480px; }
.phone{
  position:absolute; left:8%; top:0; width:230px; height:460px;
  background:var(--ink); border-radius:22px; padding:10px;
  box-shadow:0 30px 60px -20px rgba(33,23,18,0.45);
  animation:rise .8s cubic-bezier(.2,.7,.3,1) both;
}
.phone .screen{
  background:var(--paper); border-radius:14px; height:100%; overflow:hidden;
  display:flex; flex-direction:column;
}
.phone .screen .bar{ height:34px; display:flex; align-items:center; padding:0 14px; gap:6px; border-bottom:1px solid var(--line);}
.phone .screen .bar i{width:6px; height:6px; border-radius:50%; background:var(--line-strong); display:block;}
.phone .screen .name{padding:16px 14px 8px; font-family:'Fraunces',serif; font-size:17px;}
.phone .screen .sub{padding:0 14px 14px; font-size:11.5px; color:#7a6b5f;}
.phone .screen .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:5px; padding:0 10px;}
.phone .screen .grid div{aspect-ratio:1; border-radius:6px;}

.swatch1,.swatch2,.swatch3,.swatch4,.swatch5,.swatch6{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.swatch1{ background-image:url("/images/01manicure.svg"); }
.swatch2{ background-image:url("/images/02-lashes.svg"); }
.swatch3{ background-image:url("/images/03-brows.svg"); }
.swatch4{ background-image:url("/images/04-hair.svg"); }
.swatch5{ background-image:url("/images/05-makeup.svg"); }
.swatch6{ background-image:url("/images/06-skincare.svg"); }
/* .swatch1{background:linear-gradient(135deg,var(--blush),var(--gold-light));}
.swatch2{background:linear-gradient(135deg,var(--gold),var(--wine));}
.swatch3{background:linear-gradient(135deg,#c9a37c,var(--blush));}
.swatch4{background:linear-gradient(135deg,var(--wine),#3a0f18);}
.swatch5{background:linear-gradient(135deg,var(--gold-light),#efe0c8);}
.swatch6{background:linear-gradient(135deg,#8a5a45,var(--gold));} */
.phone .cta-row{margin-top:auto; padding:14px;}
.phone .cta-row div{background:var(--wine); color:var(--paper); text-align:center; font-size:12px; padding:10px; border-radius:8px;}

.card-float{
  position:absolute; border-radius:16px; box-shadow:0 24px 48px -18px rgba(33,23,18,0.35);
}
.cf1{ right:0; top:18px; width:190px; height:150px; background:linear-gradient(160deg,var(--blush),var(--gold)); animation:rise .8s .12s cubic-bezier(.2,.7,.3,1) both; }
.cf2{ right:26px; bottom:24px; width:170px; height:170px; background:var(--ink); animation:rise .8s .24s cubic-bezier(.2,.7,.3,1) both; display:flex; align-items:center; justify-content:center;}
.cf2 svg{width:70%; height:70%;}
@keyframes rise{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }

section{padding:86px 0;}
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head .kicker{ color:var(--wine); font-family:'Fraunces',serif; font-style:italic; font-size:16px; margin-bottom:10px; display:block;}
.section-head h2{ font-size:clamp(26px,3vw,36px); }
.divider{ border:none; border-top:1px solid var(--line); }

.process-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line);}
.process-item{ padding:34px 28px 0; border-right:1px solid var(--line); }
.process-item:last-child{border-right:none;}
.process-item .num{ font-family:'Fraunces',serif; font-style:italic; font-size:15px; color:var(--wine); margin-bottom:18px; display:block;}
.process-item h3{font-size:20px; margin-bottom:12px;}
.process-item p{font-size:14.5px; color:#5a4c41; max-width:34ch;}

.bento{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
.bento-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px;}
.b-card{ border:1px solid var(--line); border-radius:4px; padding:32px; background:rgba(255,255,255,0.35);}
.b-card h3{font-size:19px; margin-bottom:10px;}
.b-card p{font-size:14.5px; color:#5a4c41; max-width:38ch;}
.b-feature{ grid-row: span 1; display:flex; flex-direction:column; justify-content:space-between; min-height:230px;}
.b-feature .mini-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:20px;}
.b-feature .mini-grid div{ aspect-ratio:1; border-radius:5px;}
.b-side{ background:var(--ink); color:var(--paper-onink); border:none; }
.b-side h3{color:var(--paper);}
.b-side svg{ margin-bottom:18px; width:30px; height:30px; }

.showcase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.show-card{ color:inherit; }
.show-frame{
  border-radius:14px; overflow:hidden; border:1px solid var(--line-strong);
  background:var(--paper); box-shadow:0 20px 40px -24px rgba(33,23,18,0.3);
}
.show-frame .bar{ height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#eadfcf; border-bottom:1px solid var(--line);}
.show-frame .bar i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);}
.show-frame .body{ padding:18px 16px 20px;}
.show-frame .name{ font-family:'Fraunces',serif; font-size:17px; margin-bottom:4px;}
.show-frame .role{ font-size:12.5px; color:#7a6b5f; margin-bottom:14px;}
.show-frame .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px;}
.show-frame .grid3 div{ aspect-ratio:1; border-radius:5px;}
.show-caption{ margin-top:14px; display:flex; justify-content:space-between; font-size:13.5px; color:#5a4c41;}
.show-caption span.slug{ font-family:'Fraunces',serif; font-style:italic; color:var(--wine);}
.last-visit{ margin:-28px 0 28px; font-size:14.5px; color:#5a4c41;}
.last-visit a{ color:var(--wine); font-family:'Fraunces',serif; font-style:italic; }
.empty{ color:#5a4c41; font-size:14.5px; }

.testimonial{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:flex-start; max-width:760px;}
.avatar{ width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--wine),var(--gold)); display:flex; align-items:center; justify-content:center; color:var(--paper); font-family:'Fraunces',serif; font-size:20px;}
.testimonial blockquote{ font-family:'Fraunces',serif; font-size:22px; line-height:1.45; margin-bottom:14px;}
.testimonial cite{ font-style:normal; font-size:14px; color:#5a4c41;}

.cta-section{ background:var(--ink); color:var(--paper); border-radius:6px; margin:0 32px; padding:64px 56px;}
.cta-inner{ max-width:1096px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.cta-inner h2{ color:var(--paper); font-size:clamp(26px,3vw,34px); margin-bottom:16px;}
.cta-inner p{ color:var(--paper-onink); font-size:15.5px; max-width:38ch;}
.field{ margin-bottom:22px;}
.field label{ display:block; font-size:12.5px; color:var(--gold-light); margin-bottom:8px; letter-spacing:.02em;}
.field input{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(243,235,221,0.3);
  color:var(--paper); font-family:'Inter',sans-serif; font-size:16px; padding:10px 2px;
  outline:none; transition:border-color .18s ease;
}
.field input::placeholder{ color:rgba(243,235,221,0.35);}
.field input:focus{ border-color:var(--gold);}
.form-note{ margin-top:16px; color:var(--gold-light); font-size:14px;}

footer{ padding:48px 32px 60px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#7a6b5f;}

@media (max-width:880px){
  .hero{ grid-template-columns:1fr; }
  .collage{ height:380px; margin-top:20px;}
  .process-list{ grid-template-columns:1fr; }
  .process-item{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:28px; margin-bottom:6px;}
  .bento{ grid-template-columns:1fr;}
  .bento-row{ grid-template-columns:1fr;}
  .showcase-grid{ grid-template-columns:1fr;}
  .cta-inner{ grid-template-columns:1fr;}
  .cta-section{ margin:0 16px; padding:44px 28px;}
  .wrap{ padding:0 20px;}
  nav{ padding:22px 20px;}
  .hero-cta{ flex-wrap:wrap; }
}