/* About page: gold Banner + white Studio Brand two-column, no cream cover, no Team / Our Services */

[data-framer-name="Team"],
[data-framer-name="Team"] *,
[data-framer-name="Beauty Unfiltered"],
[data-framer-name="Beauty Unfiltered"] *,
.malli-about-services,
.malli-about-services * {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Landing: solid brand gold (no JS class required for first paint) */
#hero-banner,
[data-framer-name="Banner"],
[data-framer-name="Banner"].malli-about-banner {
  background-color: #c5a028 !important;
  background-image: none !important;
}

#hero-banner [data-framer-name="Overlay"],
#hero-banner [data-framer-name="Cover"],
#hero-banner [data-framer-name="Background"],
[data-framer-name="Banner"] [data-framer-name="Overlay"],
[data-framer-name="Banner"] [data-framer-name="Cover"],
[data-framer-name="Banner"] [data-framer-name="Background"],
[data-framer-name="Banner"].malli-about-banner [data-framer-name="Overlay"],
[data-framer-name="Banner"].malli-about-banner [data-framer-name="Cover"],
[data-framer-name="Banner"].malli-about-banner [data-framer-name="Background"] {
  background-color: #c5a028 !important;
  background-image: none !important;
}

/* Banner only: hide hand cutouts / leftover cover media */
#hero-banner img,
#hero-banner [data-framer-name="Image"],
#hero-banner [data-framer-name="Shadow"],
#hero-banner figure,
[data-framer-name="Banner"] img,
[data-framer-name="Banner"] [data-framer-name="Image"],
[data-framer-name="Banner"] [data-framer-name="Shadow"],
[data-framer-name="Banner"] figure,
[data-framer-name="Banner"].malli-about-banner img,
[data-framer-name="Banner"].malli-about-banner [data-framer-name="Image"],
[data-framer-name="Banner"].malli-about-banner [data-framer-name="Shadow"],
[data-framer-name="Banner"].malli-about-banner figure {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Studio Brand: solid white, no cream swirl cover (no JS class required) */
[data-framer-name="Studio Brand"],
[data-framer-name="Studio Brand"].malli-about-studio {
  background-color: #ffffff !important;
  background-image: none !important;
}

[data-framer-name="Studio Brand"] [data-framer-name="Overlay"],
[data-framer-name="Studio Brand"] [data-framer-name="Cover"],
[data-framer-name="Studio Brand"] [data-framer-name="Background"],
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Overlay"],
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Cover"],
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Background"] {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Two-column: nail photo left, copy right (Framer was stacking Column + Content) */
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(24px, 4vw, 64px) !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 40px) !important;
  box-sizing: border-box !important;
}

/* Framer wraps Column/Content in .ssr-variant — those are the real flex items */
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"] > .ssr-variant,
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"] > [data-framer-name="Content"],
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"] > [data-framer-name="Column"] {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 520px !important;
  min-width: 0 !important;
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
}

[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Column"],
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Content"] {
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Injected clean row (preferred when JS builds it) */
[data-framer-name="Studio Brand"].malli-about-studio .malli-studio-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(24px, 4vw, 64px) !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 4vw, 40px) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

[data-framer-name="Studio Brand"].malli-about-studio .malli-studio-media,
[data-framer-name="Studio Brand"].malli-about-studio .malli-studio-copy {
  flex: 1 1 0 !important;
  max-width: 520px !important;
  min-width: 0 !important;
}

[data-framer-name="Studio Brand"].malli-about-studio .malli-studio-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
}

[data-framer-name="Studio Brand"].malli-about-studio.malli-studio-laid-out [data-framer-name="Container"] {
  display: none !important;
}

[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Sculpture"],
[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Sculpture"] img,
[data-framer-name="Studio Brand"].malli-about-studio .malli-studio-hand,
[data-framer-name="Studio Brand"].malli-about-studio .malli-studio-hand img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

[data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Sculpture"] [data-framer-background-image-wrapper] {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 809.98px) {
  [data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"],
  [data-framer-name="Studio Brand"].malli-about-studio .malli-studio-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
  }

  [data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"] > .ssr-variant,
  [data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"] > [data-framer-name="Content"],
  [data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Container"] > [data-framer-name="Column"],
  [data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Column"],
  [data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Content"],
  [data-framer-name="Studio Brand"].malli-about-studio .malli-studio-media,
  [data-framer-name="Studio Brand"].malli-about-studio .malli-studio-copy {
    max-width: 100% !important;
    width: 100% !important;
  }

  [data-framer-name="Studio Brand"].malli-about-studio [data-framer-name="Sculpture"],
  [data-framer-name="Studio Brand"].malli-about-studio .malli-studio-hand,
  [data-framer-name="Studio Brand"].malli-about-studio .malli-studio-media {
    max-width: 360px !important;
    margin-inline: auto !important;
  }
}

/* About Banner scroll cue (bottom center, clear of deposit card at bottom-left) */
[data-framer-name="Banner"].malli-about-banner,
#hero-banner.malli-about-banner {
  position: relative !important;
  overflow: visible !important;
}

.malli-about-scroll {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(20px, 4vh, 40px) !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(20, 20, 20, 0.14) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #141414 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.malli-about-scroll__label {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none !important;
  font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #141414 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.malli-about-scroll__line {
  display: block !important;
  width: 14px !important;
  height: 2px !important;
  flex-shrink: 0 !important;
  background: #141414 !important;
  opacity: 0.55 !important;
  animation: malli-about-scroll-pulse 1.6s ease-in-out infinite !important;
}

@keyframes malli-about-scroll-pulse {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateX(4px);
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .malli-about-scroll__line {
    animation: none !important;
  }
}

/* Dark text on gold (Banner) and white (Studio Brand) */
[data-framer-name="Banner"].malli-about-banner,
[data-framer-name="Studio Brand"].malli-about-studio {
  color: #1a1a1a;
}

[data-framer-name="Banner"].malli-about-banner h1,
[data-framer-name="Banner"].malli-about-banner h2,
[data-framer-name="Banner"].malli-about-banner h3,
[data-framer-name="Banner"].malli-about-banner h4,
[data-framer-name="Banner"].malli-about-banner h5,
[data-framer-name="Banner"].malli-about-banner h6,
[data-framer-name="Banner"].malli-about-banner p,
[data-framer-name="Banner"].malli-about-banner span,
[data-framer-name="Studio Brand"].malli-about-studio h1,
[data-framer-name="Studio Brand"].malli-about-studio h2,
[data-framer-name="Studio Brand"].malli-about-studio h3,
[data-framer-name="Studio Brand"].malli-about-studio h4,
[data-framer-name="Studio Brand"].malli-about-studio h5,
[data-framer-name="Studio Brand"].malli-about-studio h6,
[data-framer-name="Studio Brand"].malli-about-studio p,
[data-framer-name="Studio Brand"].malli-about-studio span {
  color: #141414 !important;
}

.malli-about-who .malli-journey-img,
.malli-about-who .malli-journey-img--block {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 200px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 20px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  margin: 0 0 0.9rem !important;
  padding: 8px !important;
}

.malli-about-who [data-framer-name="Wrap"] {
  overflow: hidden;
}