/* ============================================================
   RIDS EMPIRE — imperial theme layer (loaded last, overrides all)
   Graphite + imperial gold + oxblood · Space Grotesk / Inter
   ============================================================ */
:root{
  --c-navy:#17171F; --c-blue:#7E2733; --c-blue-dark:#611D26; --c-accent:#C9A54E;
  --c-gold:#C9A54E; --c-gold-lt:#E7C063; --c-gold-dk:#9C7B2E;
  --c-bg:#FAF8F3; --c-text:#5B5B50; --c-text-dark:#20201A; --c-border:#E7E1D3;
  --c-green:#15803D; --c-graphite:#17171F; --c-graphite2:#20202B; --c-wine:#7E2733;
}
html{scroll-behavior:smooth}
body{background:var(--c-bg);color:var(--c-text-dark);font-family:'Inter',Arial,sans-serif}
h1,h2,h3,h4,.logo-text,.logo-name,.btn-primary,.btn-find,.btn-kp,.section-label,.eyebrow,
.about-hero-title,.ba-brand-name,.brand-logo-name,.pf-title,.stat-num{font-family:'Space Grotesk',Inter,sans-serif!important;letter-spacing:-.3px}

/* ---------- top bar / header ---------- */
.top-bar{background:linear-gradient(100deg,#101014,#20202B)!important;color:#C9BFA6!important;
  border-bottom:1px solid rgba(201,165,78,.22)}
.top-bar a{color:#E7C063!important}
header,.site-header,.nav-wrap,.header-main{position:relative}
.logo-accent,.brand-logo-accent,.logo-mark span,.logo-text span{
  background:linear-gradient(120deg,#E7C063,#C9A54E)!important;-webkit-background-clip:text!important;
  background-clip:text!important;-webkit-text-fill-color:transparent!important}
.logo-mark{background:linear-gradient(135deg,#20202B,#17171F)!important;color:#E7C063!important;
  box-shadow:0 0 0 1px rgba(201,165,78,.35),0 6px 18px -8px rgba(201,165,78,.5)!important}
.nav-item{position:relative;transition:color .18s}
.nav-item::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
  background:linear-gradient(90deg,var(--c-gold-lt),var(--c-gold));transform:scaleX(0);
  transform-origin:left;transition:transform .25s;border-radius:2px}
.nav-item:hover::after,.nav-item.active::after{transform:scaleX(1)}
.nav-phone,.nav-phone a{color:var(--c-text-dark)}
.nav-phone strong{color:var(--c-wine)!important}

/* ---------- hero ---------- */
.hero{position:relative!important;overflow:hidden!important;
  background:linear-gradient(120deg,#0E0E13 0%,#1A1A24 45%,#242430 100%)!important;
  color:#F3EEDF!important}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 82% -10%,rgba(201,165,78,.22),transparent 60%),
    radial-gradient(700px 380px at 8% 110%,rgba(126,39,51,.28),transparent 60%);
  animation:ridsGlow 12s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--c-gold),transparent);opacity:.75}
.hero>*{position:relative;z-index:2}
.hero h1{color:#FFFFFF!important;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 .hl,.hero h1 span{background:linear-gradient(120deg,#E7C063,#C9A54E)!important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{color:#D8D2C2!important}
.hero-stats-row{border-top:1px solid rgba(201,165,78,.22);border-bottom:1px solid rgba(201,165,78,.22)}
.h-stat-inline b,.h-stat-inline strong,.h-stat-inline .num{color:#E7C063!important;
  font-family:'Space Grotesk',Inter,sans-serif}
.h-stat-inline{color:#CFC8B6}
.hero .sep{background:rgba(201,165,78,.3)!important}
.hero-anim-in{opacity:0;transform:translateY(26px);animation:ridsRise .8s cubic-bezier(.2,.7,.2,1) forwards}

/* ---------- buttons ---------- */
.btn-primary,.ba-cta-btn-primary,.btn-kp,.btn-cart-send{
  background:linear-gradient(135deg,#E7C063,#C9A54E)!important;color:#17171F!important;
  border:none!important;border-radius:2px!important;font-weight:700!important;letter-spacing:.3px;
  box-shadow:0 6px 20px -6px rgba(201,165,78,.5)!important;position:relative;overflow:hidden;transition:.2s}
.btn-primary::after,.btn-kp::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transition:left .5s}
.btn-primary:hover,.btn-kp:hover{transform:translateY(-2px)!important;box-shadow:0 12px 28px -8px rgba(201,165,78,.6)!important}
.btn-primary:hover::after,.btn-kp:hover::after{left:130%}
.btn-find,.btn-outline,.ba-cta-btn-outline{background:transparent!important;
  border:1.5px solid rgba(201,165,78,.7)!important;color:#E7C063!important;border-radius:2px!important;transition:.2s}
.hero .btn-find:hover,.btn-outline:hover{background:rgba(201,165,78,.14)!important}

/* ---------- section headers with gold accent bar ---------- */
.pf-section h2,.services-section h2,.brands-app h2,.faq-section h2,.shop h2,.about-section h2,
.section-title,.sec-title{position:relative;color:var(--c-text-dark)!important;padding-left:18px}
.pf-section h2::before,.services-section h2::before,.brands-app h2::before,.faq-section h2::before,
.shop h2::before,.about-section h2::before,.section-title::before,.sec-title::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--c-gold-lt),var(--c-gold-dk))}
.section-label,.eyebrow,.about-section-label{color:var(--c-gold-dk)!important;letter-spacing:3px!important}

/* ---------- cards: imperial hover ---------- */
.brand-tile,.ba-card,.pf-card,.service-card,.svc-card,.card,.shop .product,.product-card,
.faq-item,.trust-card{transition:transform .25s,box-shadow .25s,border-color .25s!important}
.brand-tile:hover,.ba-card:hover,.pf-card:hover,.service-card:hover,.svc-card:hover,
.card:hover,.shop .product:hover,.product-card:hover,.trust-card:hover{
  transform:translateY(-4px)!important;box-shadow:0 22px 44px -28px rgba(23,23,31,.5)!important;
  border-color:rgba(201,165,78,.4)!important}
.brand-tile,.ba-card,.pf-card,.card,.product-card{border-radius:4px!important}

/* ---------- brands marquee ---------- */
.brands-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---------- footer ---------- */
footer,.site-footer,.footer{background:linear-gradient(100deg,#101014,#20202B)!important;
  color:#B8B2A2!important;border-top:1px solid rgba(201,165,78,.22)}
footer a,.site-footer a,.footer a{color:#E7C063!important}
footer b,footer strong,.footer b{color:#fff!important;font-family:'Space Grotesk',Inter,sans-serif}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].revealed{opacity:1;transform:none}

/* ---------- keyframes ---------- */
@keyframes ridsGlow{0%{opacity:.7;transform:translateY(0)}100%{opacity:1;transform:translateY(-14px)}}
@keyframes ridsRise{to{opacity:1;transform:translateY(0)}}

/* ===== 3D hero canvas ===== */
.hero{min-height:clamp(460px,64vh,620px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
#rids-hero-3d{position:absolute!important;inset:0;width:100%!important;height:100%!important;z-index:1;pointer-events:none;display:block;opacity:.96;
  -webkit-mask-image:radial-gradient(120% 100% at 70% 40%,#000 55%,transparent 100%);mask-image:radial-gradient(120% 100% at 70% 40%,#000 55%,transparent 100%)}
.hero>h1,.hero>p,.hero>.hero-stats-row,.hero>.hero-btns{position:relative;z-index:2}
@media(max-width:720px){#rids-hero-3d{opacity:.7}}