/* GP Beauty Hub — Premium Editorial System */
:root{
  --ivory:#FDF9F4;
  --cream:#F8EFE5;
  --blush:#F3DCD0;
  --blush-soft:#FAEDE6;
  --gold:#B3873E;
  --gold-deep:#86651F;
  --gold-light:#EACFA1;
  --charcoal:#1D1916;
  --ink-soft:#4A423C;
  --taupe:#7E7168;
  --line:rgba(29,25,22,.11);
  --shadow-lg:0 30px 80px -20px rgba(29,25,22,.22);
  --shadow-sm:0 12px 30px -12px rgba(29,25,22,.18);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--charcoal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#fff}
.font-serif{font-family:var(--serif)}
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;
  display:inline-flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--gold);display:inline-block}
.eyebrow.center::after{content:"";width:2.2rem;height:1px;background:var(--gold);display:inline-block}
h1,h2,h3{font-family:var(--serif);line-height:1.02;letter-spacing:-.01em}
.display-xl{font-size:clamp(2.8rem,7.2vw,5.6rem)}
.display-lg{font-size:clamp(2.2rem,4.8vw,3.8rem)}
.display-md{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.lead{font-size:1.08rem;line-height:1.75;color:var(--ink-soft)}
.micro-label{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;font-weight:800}
.gold-text{
  background:linear-gradient(105deg,#8A6526 0%,#C9A24B 30%,#EACFA1 50%,#B3873E 70%,#86651F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  padding:1.05rem 2.1rem;transition:.35s cubic-bezier(.22,1,.36,1);
  border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
}
.btn-gold{background:var(--charcoal);color:#fff;border-color:var(--charcoal);position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent,#B3873E 60%);opacity:0;transition:.4s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--gold-deep)}
.btn-gold:hover::after{opacity:.28}
.btn-outline{border-color:rgba(29,25,22,.22);color:var(--charcoal);background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
.btn-outline:hover{border-color:var(--charcoal);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--charcoal)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.link-arrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--charcoal);text-decoration:none}
.link-arrow span{transition:.3s}
.link-arrow:hover span{transform:translateX(6px)}
.link-arrow i{font-style:normal;color:var(--gold-deep)}
/* Nav */
#navbar{transition:.45s cubic-bezier(.22,1,.36,1)}
#navbar.scrolled{background:rgba(253,249,244,.92);backdrop-filter:blur(16px);box-shadow:0 10px 40px -18px rgba(0,0,0,.18);border-bottom:1px solid var(--line)}
.nav-link{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);text-decoration:none;position:relative;padding:.4rem 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:.35s}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link:hover,.nav-link.active{color:var(--charcoal)}
/* Hero */
.hero-frame{position:relative;overflow:hidden;background:#141110}
.hero-frame img{transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.hero-frame:hover img{transform:scale(1.045)}
.img-zoom{overflow:hidden}
.img-zoom img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.img-zoom:hover img{transform:scale(1.07)}
/* Before / After */
.ba-wrap{position:relative;overflow:hidden;user-select:none;touch-action:none;border-radius:2px;box-shadow:var(--shadow-lg);background:#111;cursor:ew-resize}
.ba-wrap img{pointer-events:none;display:block;width:100%;height:100%;object-fit:cover}
.ba-after{position:absolute;inset:0;overflow:hidden}
.ba-after img{width:100%;height:100%}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.4);z-index:5}
.ba-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:#fff;color:var(--charcoal);
  display:flex;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);font-weight:900;letter-spacing:0;z-index:6;white-space:nowrap;
}
.ba-tag{
  position:absolute;top:1rem;font-size:.68rem;letter-spacing:.24em;font-weight:800;
  padding:.55rem 1rem;background:rgba(0,0,0,.62);color:#fff;backdrop-filter:blur(8px);z-index:4;
}
/* Editorial numbers */
.ed-row{border-top:1px solid var(--line);transition:.4s}
.ed-row:hover{background:#fff}
.ed-num{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);color:transparent;-webkit-text-stroke:1px var(--gold);line-height:1}
.ed-row:hover .ed-num{color:var(--gold);-webkit-text-stroke:1px var(--gold)}
/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}
.hero-line{display:block;overflow:hidden}
.hero-line>span{display:block;transform:translateY(110%);animation:rise 1.1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise{to{transform:none}}
/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee-track{display:inline-flex;gap:3.5rem;padding:1rem 0;animation:scroll 28s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
/* Cards */
.trans-card{position:relative;overflow:hidden;background:#111}
.trans-card img{transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .6s}
.trans-card:hover img{transform:scale(1.08)}
.trans-badge{position:absolute;left:.9rem;top:.9rem;z-index:3;font-size:.62rem;letter-spacing:.22em;font-weight:800;background:rgba(253,249,244,.92);padding:.5rem .85rem;color:var(--charcoal)}
.insta-grid img{aspect-ratio:1;object-fit:cover;width:100%}
/* Inputs */
.field{width:100%;background:#fff;border:1px solid rgba(29,25,22,.16);padding:.95rem 1.05rem;font-size:.95rem;outline:none;transition:.3s;font-family:var(--sans)}
.field:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(179,135,62,.16)}
label.lbl{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--ink-soft);margin-bottom:.5rem;display:block}
/* Mobile sticky */
#mobileBar{backdrop-filter:blur(16px);background:rgba(29,25,22,.96);border-top:1px solid rgba(255,255,255,.12)}
/* Misc */
.divider-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.texture-grain{position:relative}
.texture-grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(179,135,62,.08) 1px,transparent 1px);
  background-size:22px 22px;
}
.dark-section{background:#161210;color:#F5EDE3}
.dark-section .lead{color:#C9BBAE}
.footer-link{color:#B9ABA0;text-decoration:none;font-size:.92rem}
.footer-link:hover{color:#fff}
#mobileMenu{transition:.45s cubic-bezier(.22,1,.36,1)}
.success-check{width:72px;height:72px;border-radius:50%;background:#1a7a4a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto}
@media (max-width:768px){
  .btn{padding:.95rem 1.4rem;font-size:.72rem}
  #mobileBar{display:flex}
}
@media (min-width:769px){#mobileBar{display:none}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}