/* ============================================================
   THE BEAUTY VAULT — The Art of Becoming
   Shared design system
   ============================================================ */
:root{
  --noir:#1C1B1A;
  --ink:#2B2A28;
  --ivory:#FBF8F3;
  --white:#FFFFFF;
  --champ:#B89B5E;
  --champ-deep:#9A7E45;
  --blush:#F6E7E7;
  --blush-deep:#EBD3D3;
  --rose:#C98A8A;
  --grey:#6E6A64;
  --rule:#E2D6BF;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- TYPOGRAPHY ---------- */
.serif{font-family:'Playfair Display',Georgia,serif;}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;color:var(--noir);line-height:1.18;}
.script{font-family:'Pinyon Script',cursive;}
.label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--champ-deep);font-weight:500;}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--champ);font-weight:500;}
.lede{font-family:'Cormorant Garamond',serif;font-size:23px;font-style:italic;color:var(--champ-deep);line-height:1.5;}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.section{padding:96px 0;}
.section.tight{padding:64px 0;}
.center{text-align:center;}
.gold-line{width:64px;height:1px;background:var(--champ);border:0;margin:26px auto;}
.gold-line.left{margin-left:0;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
  padding:15px 36px;border:1px solid var(--champ);color:var(--champ-deep);
  background:transparent;cursor:pointer;transition:all .35s ease;
}
.btn:hover{background:var(--champ);color:var(--white);}
.btn.dark{border-color:var(--ivory);color:var(--ivory);}
.btn.dark:hover{background:var(--ivory);color:var(--noir);}
.btn.solid{background:var(--noir);border-color:var(--noir);color:var(--ivory);}
.btn.solid:hover{background:var(--champ);border-color:var(--champ);color:var(--white);}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;transition:all .4s ease;
}
.nav.solid{background:rgba(251,248,243,.96);box-shadow:0 1px 0 rgba(0,0,0,.05);backdrop-filter:blur(6px);}
.nav .brand{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:.22em;color:var(--noir);}
.nav.transparent .brand,.nav.transparent .nav-links a,.nav.transparent .nav-toggle span{color:var(--ivory);}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);transition:color .3s;}
.nav-links a:hover{color:var(--champ-deep);}
.nav-links a.cta{border:1px solid var(--champ);padding:9px 20px;color:var(--champ-deep);}
.nav.transparent .nav-links a.cta{border-color:var(--ivory);color:var(--ivory);}
.nav-links a.cta:hover{background:var(--champ);color:var(--white);border-color:var(--champ);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;}
.nav-toggle span{width:24px;height:1.5px;background:var(--noir);transition:.3s;}

/* ---------- HERO ---------- */
.hero{
  min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ivory);position:relative;overflow:hidden;
  background:linear-gradient(150deg,#26211c 0%,#1C1B1A 60%,#221d18 100%);
}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 70% 30%,rgba(184,155,94,.16),transparent 55%),
  radial-gradient(circle at 20% 80%,rgba(201,138,138,.12),transparent 50%);}
.hero .hero-inner{position:relative;z-index:2;max-width:760px;padding:120px 30px 60px;}
.hero .eyebrow{color:var(--champ);}
.hero h1{color:var(--ivory);font-size:clamp(34px,5.4vw,62px);letter-spacing:.02em;margin:22px 0;}
.hero .hero-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:#e0d3ba;margin-bottom:36px;}
.page-hero{
  min-height:56vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ivory);
  background:linear-gradient(150deg,#26211c,#1C1B1A);position:relative;overflow:hidden;
}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,rgba(184,155,94,.15),transparent 55%);}
.page-hero .inner{position:relative;z-index:2;max-width:680px;padding:140px 30px 70px;}
.page-hero h1{color:var(--ivory);font-size:clamp(32px,4.5vw,52px);margin-bottom:18px;}
.page-hero p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:#e0d3ba;}

/* ---------- IMAGE PLACEHOLDERS ---------- */
.imgph{
  position:relative;background:
    repeating-linear-gradient(45deg,#efe7d8,#efe7d8 12px,#f4eee2 12px,#f4eee2 24px);
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  color:var(--champ-deep);text-align:center;min-height:260px;
}
.imgph span{font-size:10px;letter-spacing:.28em;text-transform:uppercase;padding:8px 14px;background:rgba(251,248,243,.75);border:1px solid var(--rule);}
.imgph.tall{min-height:520px;}
.imgph.dark{background:repeating-linear-gradient(45deg,#262019,#262019 12px,#2c251d 12px,#2c251d 24px);color:var(--champ);border-color:#3a3128;}
.imgph.dark span{background:rgba(28,27,26,.6);border-color:#3a3128;color:var(--champ);}

/* ---------- SECTION HEADINGS ---------- */
.sec-head{max-width:680px;}
.sec-head.center{margin:0 auto;}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);margin:10px 0 4px;}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split.narrow{gap:48px;}

/* ---------- ERAS GRID ---------- */
.eras-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:48px;}
.era-card{background:var(--ivory);padding:38px 18px;text-align:center;transition:background .4s;}
.era-card:nth-child(even){background:var(--blush);}
.era-card:hover{background:var(--white);}
.era-card .num{font-family:'Playfair Display',serif;font-size:15px;color:var(--rule);}
.era-card h3{font-size:21px;margin:10px 0 8px;}
.era-card .stage{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--champ-deep);}
.era-card .becoming{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--grey);margin-top:12px;}

/* Era detail blocks */
.era-detail{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center;padding:54px 0;border-bottom:1px solid var(--rule);}
.era-detail:nth-child(even) .era-text{order:2;}
.era-detail h3{font-size:30px;margin-bottom:6px;}

/* ---------- METHOD ---------- */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.method-card{border:1px solid var(--rule);padding:42px 30px;text-align:center;background:var(--white);}
.method-card:nth-child(1){background:var(--blush);}
.method-card:nth-child(3){background:#f4ecdc;}
.method-card .step{font-size:10px;letter-spacing:.3em;color:var(--champ-deep);}
.method-card h3{font-size:24px;letter-spacing:.1em;margin:14px 0 6px;}
.method-card .role{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--champ-deep);margin-bottom:16px;}
.method-card p{font-size:14px;}

/* ---------- PHILOSOPHY BAND ---------- */
.band{background:var(--noir);color:var(--ivory);text-align:center;padding:110px 30px;}
.band .quote{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(24px,3.4vw,38px);line-height:1.4;max-width:840px;margin:0 auto;color:var(--ivory);}
.band .quote em{color:var(--champ);font-style:italic;}
.band.blush{background:var(--blush);color:var(--noir);}
.band.blush .quote{color:var(--noir);}
.band.blush .quote em{color:var(--champ-deep);}

/* ---------- FEATURE CARDS ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;}
.feature{background:var(--white);border:1px solid var(--rule);padding:0 0 32px;}
.feature .imgph{min-height:220px;border:0;border-bottom:1px solid var(--rule);}
.feature .fc{padding:26px 28px 0;}
.feature h3{font-size:21px;margin-bottom:8px;}
.feature p{font-size:14px;}

/* ---------- PRICING ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.tier{border:1px solid var(--rule);background:var(--white);padding:40px 30px;text-align:center;}
.tier.featured{background:var(--noir);color:var(--ivory);border-color:var(--noir);transform:scale(1.03);}
.tier.featured h3,.tier.featured .price{color:var(--ivory);}
.tier .tname{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--champ-deep);}
.tier.featured .tname{color:var(--champ);}
.tier h3{font-size:24px;margin:10px 0;}
.tier .price{font-family:'Playfair Display',serif;font-size:34px;color:var(--noir);}
.tier .price small{font-size:13px;color:var(--grey);}
.tier ul{list-style:none;margin:22px 0;text-align:left;}
.tier li{font-size:13.5px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06);}
.tier.featured li{border-color:rgba(255,255,255,.12);}
.tier li::before{content:"—  ";color:var(--champ);}

/* ---------- JOURNAL ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;}
.post .imgph{min-height:220px;margin-bottom:18px;}
.post .cat{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--champ-deep);}
.post h3{font-size:20px;margin:8px 0;}
.post .meta{font-size:12px;color:var(--grey);}

/* ---------- FORM ---------- */
.form-wrap{max-width:680px;margin:0 auto;background:var(--white);border:1px solid var(--rule);padding:56px;}
.form-row{margin-bottom:24px;}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.form-row label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--champ-deep);margin-bottom:8px;}
.form-row input,.form-row select,.form-row textarea{
  width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;
  padding:11px 2px;font-family:'Montserrat',sans-serif;font-size:15px;color:var(--ink);font-weight:300;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--champ);}
.form-row textarea{min-height:120px;resize:vertical;}

/* ---------- FOOTER ---------- */
.footer{background:var(--noir);color:#a89e8a;padding:80px 0 36px;}
.footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;}
.footer .fbrand{font-family:'Playfair Display',serif;font-size:22px;letter-spacing:.2em;color:var(--ivory);}
.footer .fmethod{font-size:9.5px;letter-spacing:.4em;color:var(--champ);margin-top:8px;}
.footer p{font-size:13px;line-height:1.8;margin-top:16px;color:#a89e8a;}
.footer h4{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--champ);margin-bottom:16px;font-family:'Montserrat',sans-serif;font-weight:500;}
.footer .flinks a{display:block;font-size:13px;padding:5px 0;color:#cfc6b4;}
.footer .flinks a:hover{color:var(--champ);}
.footer .news input{width:100%;border:0;border-bottom:1px solid #4a4136;background:transparent;color:var(--ivory);padding:10px 2px;font-size:13px;margin-bottom:18px;}
.footer .news input::placeholder{color:#7d7464;}
.footer .copy{border-top:1px solid #38312a;margin-top:54px;padding-top:26px;text-align:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#7d7464;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .split,.era-detail{grid-template-columns:1fr;gap:32px;}
  .era-detail:nth-child(even) .era-text{order:0;}
  .method-grid,.cards-3,.tiers,.posts{grid-template-columns:1fr;}
  .eras-grid{grid-template-columns:1fr 1fr;}
  .footer .fgrid{grid-template-columns:1fr;gap:36px;}
  .form-row.two{grid-template-columns:1fr;}
  .tier.featured{transform:none;}
}
@media(max-width:680px){
  .wrap{padding:0 24px;}
  .section{padding:64px 0;}
  .nav{padding:18px 24px;}
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:74%;max-width:320px;
    background:var(--noir);flex-direction:column;justify-content:center;gap:26px;
    transform:translateX(100%);transition:transform .4s ease;padding:40px;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{color:var(--ivory)!important;font-size:13px;}
  .nav-links a.cta{border-color:var(--champ)!important;color:var(--champ)!important;}
  .nav-toggle{display:flex;z-index:120;}
  .nav.transparent .nav-toggle span,.nav-toggle span{background:var(--ivory);}
  .nav.solid .nav-toggle span{background:var(--noir);}
  .form-wrap{padding:32px 24px;}
  .eras-grid{grid-template-columns:1fr;}
}