/* ============================================================
   MEWEEE × WeeeTinker-inspired dark theme overlay
   Deep violet backgrounds, vivid red accent, glassmorphism,
   ambient glow blobs, and interactive cursor effects.
   Load order: LAST (after main.css and cdn.myportfolio CSS).
============================================================ */

:root {
  --wt-bg:          #10001d;
  --wt-bg-deep:     #140022;
  --wt-bg-panel:    #241038;
  --wt-bg-panel-rgb: 36, 16, 56;
  --wt-bg-sidebar:  #1a002f;
  --wt-text:        #f7edff;
  --wt-text-dim:    #c4b0d7;
  --wt-text-muted:  #9b83ae;
  --wt-accent:      #f3113b;
  --wt-accent-rgb:  243, 17, 59;
  --wt-accent-hover:#ff335d;
  --wt-accent-glow: rgba(243, 17, 59, 0.34);
  --wt-border:      rgba(255, 255, 255, 0.07);
  --wt-border-strong: rgba(255, 255, 255, 0.12);
  --wt-glass-tint:  rgba(36, 16, 56, 0.45);
  --wt-shadow:      rgba(0, 0, 0, 0.4);

  /* Fluid type scale */
  --fs-xxl: clamp(3rem, 8vw, 7rem);
  --fs-xl:  clamp(2.25rem, 6vw, 5rem);
  --fs-l:   clamp(1.6rem, 3vw, 2.5rem);
  --fs-m:   clamp(1.05rem, 1.4vw, 1.35rem);
  --fs-body:clamp(.92rem, 1.05vw, 1rem);
  --fs-sm:  clamp(.8rem, .9vw, .9rem);

  /* Rhythm */
  --gap-section: clamp(4rem, 8vw, 10rem);
  --radius-lg:   16px;
  --radius-md:   10px;
  --ease:        cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
html {
  background: var(--wt-bg) !important;
  background-image: none !important;
  background-color: var(--wt-bg) !important;
}
html, body {
  color: var(--wt-text) !important;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--wt-bg) !important;
  background-image: none !important;
}
html:before {
  display: none !important;
}

body.transition-enabled .site-wrap,
.site-container,
.site-content {
  background: transparent !important;
}

/* Kill Adobe Portfolio background video/panel overlay and all stray backgrounds */
.page-background-video,
.page-background-video-with-panel,
.page-background-video .video-wrap,
.page-background-video-with-panel .video-wrap {
  display: none !important;
}

/* Nuke any stray backgrounds from base theme */
.site-wrap,
.site-wrap > *,
.site-container,
.site-content,
.header-placeholder,
main,
section {
  background: transparent !important;
  background-color: transparent !important;
}

/* ---------- Ambient glow blobs (via dedicated element to avoid body pseudo conflicts) ---------- */
body::before,
body::after {
  content: none !important;
}

.site-wrap { position: relative; z-index: 1; }

/* ---------- Interactive grid canvas ---------- */
#wt-grid-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Header / nav (glassmorphism) ---------- */
.site-header.js-site-header {
  background: transparent !important;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) !important;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  background: rgba(16, 0, 29, 0.75) !important;
  border-bottom: 1px solid var(--wt-border);
}

.site-header .logo-text a,
.site-header .logo a {
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--wt-text) !important;
  font-size: clamp(1rem, 1.4vw, 1.35rem) !important;
}

.site-header .nav-container a,
.responsive-nav .nav-container a {
  color: var(--wt-text-dim) !important;
  font-weight: 500 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: .02em;
  position: relative;
  padding: .25rem .15rem;
  transition: color .25s var(--ease);
}
.site-header .nav-container a:hover,
.site-header .nav-container a.active {
  color: var(--wt-text) !important;
}
.site-header .nav-container a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--wt-accent);
  transition: right .35s var(--ease);
}
.site-header .nav-container a:hover::after,
.site-header .nav-container a.active::after { right: 0; }

.site-header .social ul li a .icon,
.responsive-nav .social ul li a .icon {
  fill: var(--wt-text-muted) !important;
  transition: transform .25s var(--ease), fill .25s var(--ease);
}
.site-header .social ul li a:hover .icon {
  transform: translateY(-2px);
  fill: var(--wt-accent) !important;
}

/* Responsive nav overlay */
.responsive-nav {
  background: var(--wt-bg-deep) !important;
}
.responsive-nav .nav-container a {
  color: var(--wt-text-dim) !important;
}

/* Hamburger */
.hamburger i {
  background: var(--wt-text) !important;
}

/* ---------- Masthead ---------- */
.masthead {
  padding: clamp(5rem, 12vw, 12rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 6rem) !important;
  background: transparent !important;
  position: relative;
  overflow: hidden;
}

.masthead-contents { max-width: 1400px; margin: 0 auto; }
.masthead-text { text-align: left !important; position: relative; z-index: 2; }

.masthead-text h1,
.masthead-text .main-text,
.masthead h1 {
  font-size: var(--fs-xxl) !important;
  line-height: .92 !important;
  letter-spacing: -.025em !important;
  font-weight: 600 !important;
  color: var(--wt-text) !important;
  margin: 0 0 clamp(1rem, 2vw, 2rem) !important;
  text-wrap: balance;
}

/* Gradient headline accent like weeetinker hero */
.masthead-text h1 {
  background: linear-gradient(to right, var(--wt-accent), #ff6b8a, var(--wt-accent));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wt-gradient-shift 4s ease infinite;
}

@keyframes wt-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.masthead-text p,
.masthead-text .main-text + div p {
  font-size: var(--fs-m) !important;
  line-height: 1.4 !important;
  color: var(--wt-text-dim) !important;
  max-width: 48ch;
  font-weight: 400 !important;
}

/* Masthead buttons */
.masthead-buttons a,
.masthead-button {
  background: var(--wt-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .75rem 1.4rem !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: .02em !important;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.masthead-buttons a:hover,
.masthead-button:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* ---------- Gallery grid (project covers) ---------- */
main { background: transparent !important; }

.project-covers {
  max-width: 1500px;
  margin: 0 auto !important;
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 2.5rem) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.75rem) !important;
}

.project-cover {
  background: linear-gradient(to bottom, rgba(44, 18, 64, 0.6), rgba(20, 0, 34, 0.8)) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--wt-border) !important;
  box-shadow: 0 8px 32px var(--wt-shadow) !important;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease) !important;
  position: relative;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.project-cover:hover {
  border-color: var(--wt-border-strong) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(var(--wt-accent-rgb), 0.08) !important;
}

/* Top-edge accent line on cards */
.project-cover::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--wt-accent-rgb), 0.3), transparent);
  z-index: 2;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.project-cover:hover::before { opacity: 1; }

.project-cover .cover-image-wrap {
  background: var(--wt-bg-deep) !important;
  overflow: hidden;
}
.project-cover .cover-image,
.project-cover .cover {
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
}
.project-cover .cover-content-container {
  display: flex;
  flex-direction: column;
}
.project-cover .cover__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.project-cover:hover .cover__img { transform: scale(1.03); }

.project-cover .details-wrap {
  padding: clamp(.9rem, 1.6vw, 1.3rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) !important;
  background: transparent !important;
  border-top: 1px solid var(--wt-border);
}
.project-cover .details { background: transparent !important; }
.project-cover .title {
  font-size: var(--fs-m) !important;
  font-weight: 600 !important;
  color: var(--wt-text) !important;
  line-height: 1.2 !important;
}
.project-cover .date {
  display: inline-block;
  margin-top: .4rem;
  font-size: .75rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--wt-accent);
  padding: .2rem .5rem;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.project-cover .custom1,
.project-cover .custom2 {
  display: block;
  margin-top: .5rem;
  font-size: .78rem !important;
  color: var(--wt-text-muted) !important;
}

/* ---------- Cursor glow overlay on cards ---------- */
.project-cover .wt-cursor-glow {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(
      circle 200px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(var(--wt-accent-rgb), 0.12) 0%,
      rgba(var(--wt-accent-rgb), 0.06) 25%,
      rgba(var(--wt-accent-rgb), 0.02) 50%,
      transparent 100%
    );
  mix-blend-mode: screen;
  transition: opacity .4s;
}

/* ---------- Footer ---------- */
footer, .site-footer, .adobe-portfolio-footer {
  background: var(--wt-bg-deep) !important;
  color: var(--wt-text-dim) !important;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) !important;
  margin-top: var(--gap-section);
  border-top: 1px solid var(--wt-border);
}
footer a, .site-footer a { color: var(--wt-text-dim) !important; }
footer a:hover, .site-footer a:hover { color: var(--wt-accent) !important; }

.site-footer .social ul li a .icon,
.pf-footer-social ul li a .icon {
  fill: var(--wt-text-muted) !important;
  transition: transform .25s var(--ease), fill .25s var(--ease);
}
.site-footer .social ul li a .icon .st0,
.pf-footer-social ul li a .icon .st0 {
  fill: var(--wt-text-muted) !important;
}
.site-footer .social ul li a:hover .icon,
.site-footer .social ul li a:hover .icon .st0,
.pf-footer-social ul li a:hover .icon,
.pf-footer-social ul li a:hover .icon .st0 {
  transform: translateY(-2px);
  fill: var(--wt-accent) !important;
}

/* Also fix header social .st0 */
.site-header .social ul li a .icon .st0,
.responsive-nav .social ul li a .icon .st0 {
  fill: var(--wt-text-muted) !important;
  transition: fill .25s var(--ease);
}
.site-header .social ul li a:hover .icon .st0 {
  fill: var(--wt-accent) !important;
}

.footer-text, .footer-text a { color: var(--wt-text-muted) !important; }

/* ---------- Contact page ---------- */
.contact-form, .contact form, form.contact-form {
  max-width: 720px;
  margin: 0 auto;
}
input[type="text"], input[type="email"], textarea {
  border: 1px solid var(--wt-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem 1.1rem !important;
  background: rgba(var(--wt-bg-panel-rgb), 0.5) !important;
  color: var(--wt-text) !important;
  font-size: var(--fs-body) !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  outline: none !important;
  border-color: var(--wt-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--wt-accent-rgb), 0.2) !important;
}

button, .btn, input[type="submit"], .button--primary {
  background: var(--wt-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .9rem 1.6rem !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: .02em !important;
  cursor: pointer;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
button:hover, .btn:hover, input[type="submit"]:hover {
  transform: translateY(-1px);
  opacity: .88;
}

/* ---------- Project detail pages ---------- */
.project-wrap, .project-content, .project {
  background: transparent !important;
}
.project-title, .project h1 {
  font-size: var(--fs-xl) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: .95 !important;
  color: var(--wt-text) !important;
}

/* All module text */
.module-text, .module-text p {
  color: var(--wt-text-dim) !important;
}

/* ---------- Scrollbar ---------- */
html { scrollbar-color: var(--wt-accent) var(--wt-bg-deep); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #wt-grid-canvas { display: none; }
}

/* ---------- Project cover: image fills the rounded card edge-to-edge ---------- */
.project-cover {
  overflow: hidden;
  position: relative;
  transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.project-covers { perspective: 1200px; }
.project-cover .cover-content-container {
  margin: 0 !important;
  height: 100% !important;
}

/* ---------- Disable the default Adobe-Portfolio slide-out hover  ----------
   Cards stay grayscale at all times (no color flip on hover).                 */
.project-cover .cover,
.project-cover:hover .cover,
.project-cover.touch-hover .cover {
  filter: grayscale(100%) !important;
}
.project-cover:hover .cover-image::after,
.project-cover.touch-hover .cover-image::after {
  background-color: transparent !important;
  opacity: 0 !important;
}
.project-cover:hover .cover-normal.has-rollover,
.project-cover.touch-hover .cover-normal.has-rollover {
  opacity: 1 !important;
  visibility: visible !important;
}
.project-cover:hover .details-wrap,
.project-cover.touch-hover .details-wrap {
  opacity: 0 !important;
}
.project-cover:hover .cover__img,
.project-cover.touch-hover .cover__img {
  transform: translate(-50%, -50%) !important;
}

/* ---------- Hologram cursor glow (weeetinker login style) ---------- */
.project-cover .wt-cursor-glow {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(
      circle 280px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(var(--wt-accent-rgb), 0.22) 0%,
      rgba(var(--wt-accent-rgb), 0.12) 18%,
      rgba(var(--wt-accent-rgb), 0.04) 40%,
      transparent 70%
    ),
    radial-gradient(
      circle 600px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(180, 210, 255, 0.06) 0%,
      rgba(200, 225, 255, 0.03) 30%,
      transparent 100%
    );
  mix-blend-mode: screen;
}
.project-cover:hover .wt-cursor-glow,
.project-cover.touch-hover .wt-cursor-glow {
  opacity: 1 !important;
}
/* Iridescent border sheen on hover — picks up cursor position */
.project-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(
      circle 240px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(var(--wt-accent-rgb), 0.6),
      rgba(var(--wt-accent-rgb), 0.18) 35%,
      rgba(255, 255, 255, 0.05) 60%,
      transparent 80%
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 3;
}
.project-cover:hover::after,
.project-cover.touch-hover::after {
  opacity: 1;
}

/* ---------- Remove empty space reserved below fixed header ---------- */
.header-placeholder { display: none !important; }

/* ---------- Project page: zig-zag image+text rows + parallax ---------- */
#project-modules .pm-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 1280px;
  margin: clamp(2rem, 6vw, 5rem) auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}
#project-modules .pm-row.pm-row-reverse {
  flex-direction: row-reverse;
}
#project-modules .pm-row.pm-row-text-stack {
  align-items: flex-start;
}
#project-modules .pm-image-stack {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
}
#project-modules .pm-image-stack > .project-module {
  margin: 0 !important;
  width: 100%;
}
#project-modules .pm-image-stack > .project-module img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
/* ----- Masonry pack for the remaining gallery images ----- */
#project-modules .pm-masonry {
  column-count: 2;
  column-gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 1280px;
  margin: clamp(2rem, 5vw, 4rem) auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}
#project-modules .pm-masonry > .project-module {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.5vw, 2rem) !important;
  width: 100%;
  display: block;
}
#project-modules .pm-masonry > .project-module img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
@media (max-width: 760px) {
  #project-modules .pm-masonry { column-count: 1; }
}
@media (min-width: 1100px) {
  #project-modules .pm-masonry { column-count: 3; }
}
/* Orphan / wide image: span all columns */
#project-modules .pm-masonry > .pm-fullwidth {
  column-span: all;
  -webkit-column-span: all;
  margin-top: clamp(1rem, 2.5vw, 2rem) !important;
}
/* T-shirt grid: 2-up — bigger thumbnails, easier to read */
#project-modules .pm-masonry-tshirts { column-count: 2; }
@media (max-width: 460px) { #project-modules .pm-masonry-tshirts { column-count: 1; } }
#project-modules .pm-row > .project-module {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
}
#project-modules .pm-row .project-module.image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
#project-modules .pm-row .project-module.text .module-text {
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
  line-height: 1.65;
}
#project-modules .project-module.image {
  border-radius: 12px;
}
/* Feature image: full-width, max aligned to the row content width */
#project-modules > .project-module.image.pm-feature {
  display: block;
  max-width: 1280px;
  margin: clamp(2rem, 5vw, 4rem) auto !important;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  width: 100%;
}
#project-modules > .project-module.image.pm-feature img {
  width: 100%;
  height: auto;
}
#project-modules .project-module.image .js-lightbox,
#project-modules .project-module.image > a > .js-lightbox {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}
#project-modules .project-module.image img {
  transition: transform .15s linear, opacity .15s linear, filter .15s linear;
  transform-origin: center center;
  backface-visibility: hidden;
  border-radius: 12px;
  display: block;
  width: 100%;
}
/* Pink-tint overlay that fades with the parallax progress.
   Sits on the image wrapper only (not the caption), uses multiply
   blend so it actually colorizes the picture.                  */
#project-modules .project-module.image .js-lightbox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(243, 17, 59, 0.55);
  mix-blend-mode: multiply;
  opacity: var(--parallax-tint, 0);
  transition: opacity .15s linear;
  z-index: 2;
}
#project-modules img {
  border-radius: 12px;
}
#project-modules .pm-parallax {
  transition: opacity .25s linear;
}
#project-modules .project-module.text.pm-parallax,
#project-modules .module-caption-container.pm-parallax {
  transition: transform .2s linear, opacity .25s linear;
}
@media (max-width: 760px) {
  #project-modules .pm-row,
  #project-modules .pm-row.pm-row-reverse {
    flex-direction: column !important;
    gap: 1.25rem;
    margin: 2rem auto;
  }
}

/* ---------- Scroll-direction aware top nav ---------- */
.site-header.js-site-header {
  transition: transform .45s cubic-bezier(.22,.61,.36,1), background .3s ease, backdrop-filter .3s ease !important;
  will-change: transform;
}
.site-header.js-site-header.nav-hidden {
  transform: translateY(-100%);
}

/* ---------- Hide lightbox wrap until activated (offscreen class is broken) ---------- */
#lightbox-wrap.offscreen,
.js-lightbox-wrap.offscreen { display: none !important; }

/* ---------- MEWEEE wordmark SVG in header ---------- */
.site-header .logo a {
  position: relative;
  display: inline-block;
  --logo-mx: -200px;
  --logo-my: -200px;
}
.site-header .logo a .meweee-logo-svg {
  display: block;
  height: 24px;
  width: auto;
  position: relative;
  z-index: 1;
}
/* Red color reveal — circle of red follows cursor over the logo */
.site-header .logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/meweee-logo-red.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: radial-gradient(
    circle 22px at var(--logo-mx) var(--logo-my),
    #000 100%,
    transparent 100%
  );
          mask-image: radial-gradient(
    circle 22px at var(--logo-mx) var(--logo-my),
    #000 100%,
    transparent 100%
  );
  transition: -webkit-mask-image .08s linear, mask-image .08s linear;
}
/* Soft red halo glow following the cursor */
.site-header .logo a::before {
  content: "";
  position: absolute;
  inset: -16px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle 60px at calc(var(--logo-mx) + 16px) calc(var(--logo-my) + 16px),
    rgba(243, 17, 59, 0.45) 0%,
    rgba(243, 17, 59, 0.18) 30%,
    rgba(243, 17, 59, 0.05) 60%,
    transparent 100%
  );
  filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
}
.site-header .logo a:hover::before {
  opacity: 1;
}
/* Mobile: left-align logo with project cards */
@media (max-width: 767px) {
  .site-header.js-site-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .site-header .logo,
  .site-header .logo-wrap,
  .site-header .logo a {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .site-header .logo a .meweee-logo-svg {
    margin-left: 0 !important;
  }
}

/* ---------- Header nav links + social icons: white by default ---------- */
.site-header .nav-container a,
.site-header .nav-container a.active {
  color: #ffffff !important;
}
.site-header .social ul li a .icon,
.site-header .social ul li a .icon .st0,
.responsive-nav .social ul li a .icon,
.responsive-nav .social ul li a .icon .st0,
.site-footer .social ul li a .icon,
.site-footer .social ul li a .icon .st0,
.pf-footer-social ul li a .icon,
.pf-footer-social ul li a .icon .st0 {
  fill: #ffffff !important;
}

/* ---------- Tighten footer spacing + transparent background ---------- */
.site-footer {
  padding-top: 0 !important;
  padding-bottom: 1.5rem !important;
  margin-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.site-footer .pf-footer-social,
.site-footer .pf-footer-social ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}