/* ============================================================
   Cosmetics Growth — Layered-card footer redesign
   v2 — 2026-05-09
   Loads LAST to override #footer rules in style.css / pages.css
   and inline <style id="cg-main-css"> blocks.
   ============================================================ */

#footer{
  /* scope the brand var so standalone landing pages with serif/Plus Jakarta */
  /* design systems still get Bricolage inside the footer */
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --teal:#1ea8ba;
  --bg-darkest:#141a24;
  background:var(--bg-darkest);
  padding:96px 4vw 0;
  position:relative;
  z-index:10;
  overflow:hidden;
  isolation:isolate;
}
#footer a{text-decoration:none;}
#footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 65% 75% at 50% 100%,
    rgba(30,168,186,0.10) 0%,
    rgba(30,168,186,0.04) 35%,
    transparent 65%);
  pointer-events:none;
  z-index:0;
}

/* outer card shell */
#footer .footer-inner{
  position:relative;
  z-index:2;
  max-width:1280px;
  margin:0 auto;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.015) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:48px;
  padding:8px;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* inner card holding brand + nav grid */
#footer .footer-top{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:56px;
  align-items:start;
  background:linear-gradient(180deg,
    rgba(28,35,47,0.92) 0%,
    rgba(20,26,36,0.96) 100%);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:40px;
  padding:52px 56px 60px;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  padding-bottom:60px;
  margin-bottom:0;
}

/* brand column */
#footer .footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  margin:0;
  padding:0;
}
#footer .footer-logo-img{
  width:auto;
  height:52px;
  max-width:220px;
  border-radius:0;
  margin:0;
  display:block;
  object-fit:contain;
  /* aspect-ratio hint so reserved width=160 height=58 doesn't squish on older CSS caches */
  aspect-ratio:auto;
}
#footer .footer-brand-text{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:0;
}
/* wordmark logo already says the brand name — hide redundant text */
#footer .footer-brand-text strong{
  display:none;
}
#footer .footer-brand-text span{
  font-family:var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.62);
  font-weight:500;
}

/* socials sit below brand text */
#footer .footer-socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  border:0;
  width:auto;
}
#footer .social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.78);
  transition:background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
}
#footer .social-icon:hover{
  background:rgba(30,168,186,0.12);
  border-color:rgba(30,168,186,0.34);
  color:var(--teal, #1ea8ba);
  transform:translateY(-2px);
}
#footer .social-icon:focus-visible{
  outline:2px solid var(--teal, #1ea8ba);
  outline-offset:3px;
}

/* nav columns */
#footer .footer-nav{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin:0;
}
#footer .footer-nav-col{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#footer .footer-nav-label{
  font-size:11px !important;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5) !important;
  margin-bottom:6px;
}
#footer .footer-nav-col a{
  font-size:15px !important;
  font-weight:500;
  color:rgba(255,255,255,0.88) !important;
  transition:color 0.2s;
  cursor:pointer;
}
#footer .footer-nav-col a:hover{
  color:var(--teal, #1ea8ba) !important;
}

/* legal bar — sits inside outer card shell, below inner card */
#footer .footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:22px 40px 24px;
  margin:0;
  border:0;
}
#footer .footer-bottom p{
  font-size:13px !important;
  font-weight:500;
  color:rgba(255,255,255,0.55) !important;
  margin:0;
  letter-spacing:0.01em;
}
#footer .footer-legal{
  display:flex;
  align-items:center;
  gap:22px;
}
#footer .footer-legal a{
  font-size:13px !important;
  font-weight:500;
  color:rgba(255,255,255,0.62) !important;
  transition:color 0.2s;
  cursor:pointer;
}
#footer .footer-legal a:hover{
  color:#fff !important;
}

/* massive bleed wordmark — the signature visual */
#footer::after{
  content:"cosmetics growth";
  display:block;
  font-family:var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight:700;
  font-size:clamp(48px, 13vw, 220px);
  line-height:0.85;
  letter-spacing:-0.045em;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,0.07);
  background:linear-gradient(180deg,
    rgba(30,168,186,0.22) 0%,
    rgba(30,168,186,0.06) 55%,
    transparent 95%);
  -webkit-background-clip:text;
  background-clip:text;
  margin:40px 0 0;
  padding:0;
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  position:relative;
  z-index:1;
  text-transform:lowercase;
  transform:translateY(6%);
}

/* responsive */
@media (max-width:1024px){
  #footer .footer-top{
    grid-template-columns:1fr;
    gap:44px;
    padding:44px 40px 52px;
  }
  #footer .footer-nav{
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
}
@media (max-width:768px){
  #footer{padding:56px 14px 0;}
  #footer .footer-inner{border-radius:32px;padding:6px;}
  #footer .footer-top{
    padding:28px 22px 36px;
    border-radius:28px;
    gap:32px;
    display:flex;
    flex-direction:column;
  }
  #footer .footer-brand{row-gap:18px;}
  #footer .footer-nav{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }
  #footer .footer-bottom{
    padding:18px 20px 22px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  #footer .footer-legal{gap:18px;}
  #footer::after{
    font-size:clamp(40px, 17vw, 140px);
    margin-top:28px;
    letter-spacing:-0.035em;
  }
}
@media (max-width:480px){
  #footer .footer-nav{grid-template-columns:1fr 1fr;gap:20px;}
  #footer .footer-logo-img{height:44px;}
  #footer .social-icon{width:40px;height:40px;}
}
@media (prefers-reduced-motion:reduce){
  #footer .social-icon,
  #footer .footer-nav-col a,
  #footer .footer-legal a{transition:none;}
}