:root{
  --gold:#c7a34b; --bg:#000; --fg:#fff;
  --panel:#0b0b0b; --panel-2:#121212; --line:#1f1f1f;
  --wrap:1200px; --radius:22px;
  --shadow-lg:0 30px 70px rgba(0,0,0,.45);
  --shadow-md:0 18px 40px rgba(0,0,0,.35);
}

html{scroll-behavior:smooth}
.container{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:24px}

/* ===== HERO ===== */
.ws-hero{
  position:relative; margin-top:0;
  height:min(90vh,860px); min-height:600px;
  background:var(--bg); overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end;
}
.ws-hero__bg{position:absolute; inset:0; background:center/cover no-repeat var(--ws-hero, url('/assets/wrap/hero.jpg')); transform:scale(1.02)}
.ws-hero__grad{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.8) 100%); mix-blend-mode:multiply}
.ws-hero__noise{position:absolute; inset:-10%; background-image:url('/assets/noise.png'); opacity:.08; pointer-events:none}
.ws-hero__sheen{position:absolute; left:-40%; top:-40%; width:180%; height:180%;
  background:radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  transform:rotate(8deg); animation:wsSheen 12s linear infinite; opacity:.35; pointer-events:none}
@keyframes wsSheen{0%{transform:translateX(-10%) rotate(8deg)}100%{transform:translateX(10%) rotate(8deg)}}

.ws-hero__inner{position:relative; width:min(var(--wrap),100%); margin-inline:auto; padding:0 24px 42px; display:flex; flex-direction:column; align-items:flex-start}
.ws-hero .eyebrow{font:600 13px/1 'Rajdhani',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.85; margin-bottom:10px}
.ws-hero h1{font-family:'Montserrat',sans-serif; font-weight:800; line-height:.95; font-size:clamp(48px,7.8vw,92px); color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.55); margin:0}

/* Tabs */
.ws-tabs{display:flex; gap:18px; flex-wrap:wrap; margin-top:1.6rem}
.ws-tabs a{
  font:700 13px/1 'Rajdhani',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:#eaeaea; padding:.55rem .75rem; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; transition:background .2s ease, transform .2s ease, color .2s ease;
  backdrop-filter:blur(6px); background:rgba(0,0,0,.25)
}
.ws-tabs a:hover{background:linear-gradient(180deg, var(--gold), #a9892f); color:#111; transform:translateY(-2px)}
.ws-tabs a.accent{border-color:rgba(199,163,75,.6)}

/* Sections */
.ws-section{padding:48px 0; background:#000}
.ws-section.alt{background:#0b0b0b}
.ws-head{text-align:left; margin-bottom:18px}
.ws-head h2{font-family:'Montserrat',sans-serif; font-weight:800; color:var(--gold); font-size:clamp(24px,3vw,34px)}
.ws-head p{font-family:'Rajdhani',sans-serif; font-weight:400; color:#cfcfcf; max-width:800px}

/* Grids + cards */
.ws-grid{display:grid; gap:14px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.cards-3,.cards-4{grid-template-columns:1fr}}

.plan{background:#111; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow-md)}
.plan h3{font-family:'Montserrat',sans-serif; font-weight:700; color:#fff; margin:6px 0 10px}
.plan ul{margin:0 0 14px 18px; color:#dcdcdc; font-family:'Rajdhani',sans-serif}
.plan li{margin:.3rem 0}

/* Masonry */
.ws-masonry{column-count:3; column-gap:14px}
.ws-masonry img{width:100%; margin:0 0 14px; border-radius:14px; box-shadow:var(--shadow-md); display:block; transform:scale(1.02); transition:transform .55s ease}
.ws-masonry img:hover{transform:scale(1.06)}
@media (max-width:980px){.ws-masonry{column-count:2}}
@media (max-width:560px){.ws-masonry{column-count:1}}

/* Swatches */
.swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
@media (max-width:980px){.swatches{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.swatches{grid-template-columns:repeat(2,1fr)}}
.swatch{display:flex; flex-direction:column; gap:8px; align-items:center; background:#0f0f0f; border:1px solid var(--line); border-radius:14px; padding:10px; cursor:pointer; transition:transform .2s ease, border-color .2s ease}
.swatch:hover{transform:translateY(-2px); border-color:#2b2b2b}
.swatch img{width:100%; height:110px; object-fit:cover; border-radius:10px}
.swatch span{font:600 12px/1.1 'Rajdhani',sans-serif; color:#d9d9d9; text-align:center}
.swatch-tip{color:#bdbdbd; font-family:'Rajdhani',sans-serif; margin-top:20px}

/* Brands */
.brand-block{margin-top:26px}
.brand-eyebrow{font:700 12px/1 'Rajdhani',sans-serif; letter-spacing:.18em; color:#bdbdbd; text-transform:uppercase; margin:0 0 10px}
.brand-row{display:flex; gap:28px; align-items:center; flex-wrap:wrap}
.brand-row img{height:40px; width:auto; object-fit:contain; filter:none; opacity:.95}

/* CTA */
.ws-cta{text-align:center; margin-top:40px}
.btn{
  display:inline-block; padding:.9rem 1.3rem; border-radius:12px;
  background:linear-gradient(180deg, var(--gold), #a9892f);
  color:#111; font-weight:800; font-family:'Montserrat',sans-serif; letter-spacing:.04em;
  box-shadow:0 8px 28px rgba(199,163,75,.25); transition:transform .2s ease
}
.btn:hover{transform:translateY(-2px)}

/* FAQ */
.faq details {
  background:#101010;
  border:1px solid var(--line);
  border-radius:14px;
  padding:0;                /* let summary/p control spacing */
  margin-bottom:20px;
  overflow:hidden;
}

.faq summary {
  cursor:pointer;
  color:#eaeaea;
  font-weight:700;
  font-family:'Montserrat',sans-serif;
  padding:14px 20px;        /* balanced space above/below */
  line-height:1.2;          /* keeps text vertically centered */
  display:flex;
  align-items:center;       /* aligns text with chevron */
}

.faq p {
  color:#cfcfcf;
  font-family:'Rajdhani',sans-serif;
  padding:0 20px 14px;      /* left/right match summary, less bottom */
  margin:0;
  line-height:1.4;
}

/* Smooth glide */
.faq details{
  overflow:hidden;                         /* hide while animating */
  transition:max-height .45s ease, opacity .35s ease;
  will-change:max-height;
}
@media (prefers-reduced-motion: reduce){
  .faq details{ transition:none }
}

/* Care list */
.care-list{list-style:disc; margin-left:20px; color:#dcdcdc; font-family:'Rajdhani',sans-serif}

/* Reveal */
.reveal{opacity:0; transform:translateY(10px)}
.reveal.revealed{opacity:1; transform:none; transition:transform .5s ease, opacity .5s ease}

/* Header behavior hook (if header.js adds these) */
.site-header.scrolled{backdrop-filter:blur(8px); background:rgba(0,0,0,.35); transition:background .3s ease, backdrop-filter .3s ease}
.site-header.hide{transform:translateY(-100%); transition:transform .3s ease}

/* 1) Keep generic hover OFF the pill button */
.nav .nav-links a:hover:not(.wrap-btn) {
  /* whatever your normal hover is */
  color: #ffd; /* example */
}

/* 2) Fix wrap button stacking so shimmer doesn't cover text */
.wrap-btn {
  position: relative;
  z-index: 0;            /* create a local stacking context */
  isolation: isolate;
  color: var(--gold) !important;  /* lock default text color */
}

.wrap-btn::before {
  z-index: -1;           /* keep sheen behind text */
}

/* 3) Nuke any background-clip / transparent text inherited from global link hover */
.wrap-btn,
.wrap-btn:hover {
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  mix-blend-mode: normal;
}

/* 4) Define its own hover so it stays readable */
.wrap-btn:hover {
  background: linear-gradient(180deg, var(--gold), #a9892f);
  color: #111 !important;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Smooth slide for header */
#site-header{
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform;
}
#site-header.hide{
  transform: translateY(-100%);
  opacity: .98;           /* optional */
  pointer-events: none;   /* optional */
}