/* Dark conceptual hero refinement — Queen Hair */
:root {
  --hero-dark: #070707;
  --hero-soft: #aaa39a;
}

main {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.site-header {
  color: #fff;
}

.site-header.scrolled {
  background: rgba(7, 7, 7, .94);
  border-color: rgba(255, 255, 255, .12);
}

.brand {
  width: 188px;
  height: 74px;
  overflow: visible;
  flex: 0 0 auto;
}

.brand img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transform: none;
  filter: brightness(0) invert(1);
}

.nav a {
  color: #fff;
}

.header-cta {
  color: #070707;
  background: var(--gold);
  border-color: var(--gold);
}

.header-cta:hover,
.header-cta:focus-visible {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .65);
}

.menu-toggle span {
  background: #fff;
}

.hair-journey {
  background: var(--hero-dark);
  color: #fff;
  isolation: auto;
}

.hair-scroll-layer {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto auto;
  width: min(64vw, 940px);
  height: 100%;
  overflow: hidden;
}

.hair-scroll-layer::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, var(--hero-dark) 0%, rgba(7,7,7,.92) 18%, rgba(7,7,7,.16) 53%, rgba(7,7,7,0) 82%),
    linear-gradient(180deg, rgba(7,7,7,0) 72%, var(--hero-dark) 100%);
  pointer-events: none;
}

.hair-scroll-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 56% top;
  margin: 0;
  transform: none !important;
  filter: none;
}

.hero {
  z-index: 3;
  background: transparent;
}

.hero-grid {
  grid-template-columns: 58% 42%;
}

.hero-copy {
  text-shadow: 0 2px 30px rgba(0,0,0,.28);
}

.hero .eyebrow,
.services .eyebrow {
  color: var(--gold);
}

.hero h1 {
  color: #fff;
}

.hero h1 em {
  color: var(--gold);
}

.hero-lead {
  color: #c5c0b9;
}

.hero-proof {
  border-color: rgba(255,255,255,.18);
  color: #8e8982;
}

.hero-proof strong {
  color: #fff;
}

.hero .text-link {
  color: #fff;
}

.hero-ticker {
  color: #fff;
  background: rgba(7,7,7,.98);
  border-color: rgba(250,171,0,.62);
}

.services {
  z-index: 3;
  min-height: 105vh;
  background: rgba(7,7,7,0);
}

.services .section-head h2,
.service-note p,
.service-note a {
  color: #fff;
}

.service-grid {
  border-color: rgba(255,255,255,.16);
}

.service-card {
  background: #0c0c0c;
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
}

.service-card > span {
  color: #3a3834;
}

.service-card h3 {
  color: #fff;
}

.service-card p {
  color: #aaa49b;
}

.service-card:hover h3,
.service-card:hover p {
  color: #15100a;
}

.service-note {
  border-color: rgba(255,255,255,.18);
}

.service-note em {
  color: var(--gold);
}

.hair-thread {
  display: none;
}

.results,
.method {
  position: relative;
}

.results {
  z-index: 3;
  background: rgba(10,10,10,.94);
}

.method {
  z-index: 2;
  background: rgba(255,255,255,.96);
}

@media (max-width: 1020px) {
  .site-header {
    background: rgba(7,7,7,.9);
  }

  .nav {
    background: var(--hero-dark);
  }

  .nav a {
    color: #fff;
  }

  .hair-thread {
    left: calc(81% - 125px);
    width: 250px;
  }
}

@media (max-width: 740px) {
  .brand {
    width: 142px;
    height: 62px;
  }

  .hair-scroll-layer {
    width: 100%;
    height: 100%;
    opacity: 1;
    filter: none;
  }

  .hair-scroll-layer::after {
    display: none;
  }

  .hair-scroll-layer::before {
    background:
      linear-gradient(90deg, rgba(7,7,7,.9) 0%, rgba(7,7,7,.56) 48%, rgba(7,7,7,.08) 100%),
      linear-gradient(180deg, rgba(7,7,7,.08) 45%, var(--hero-dark) 100%);
  }

  .hair-scroll-layer img {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-position: 64% top;
  }

  .hero-copy {
    padding-top: 120px;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 16vw, 5.2rem);
  }

  .hero-lead {
    max-width: 86%;
    color: #d2cec8;
  }

  .hero-proof {
    max-width: 84%;
  }

  .services {
    background: rgba(7,7,7,.55);
  }

  .services .section-head {
    color: #fff;
  }

  .hair-thread {
    top: 84svh;
    left: auto;
    right: -76px;
    width: 210px;
    height: 4350px;
    opacity: .62;
  }
}