/* ========================================
   LUMIERE - About Us Page CSS
   Extends style.css (shared variables/nav/footer)
   ======================================== */

/*  NAV ACTIVE LINK  */
.nav-active {
  color: var(--gold) !important;
}
.nav-active::after {
  transform: scaleX(1) !important;
}

/*  PAGE HERO BANNER  */
.page-hero {
  position: relative;
  height: 52vh;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5rem;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 60% 30%,
      rgba(40, 30, 20, 0.6) 0%,
      transparent 70%
    ),
    linear-gradient(160deg, #1a1208 0%, #0d0d0d 60%, #111 100%);
}
/* Decorative flowing hair streaks */
.page-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 6px,
    rgba(201, 169, 110, 0.03) 6px,
    rgba(201, 169, 110, 0.03) 7px
  );
}
.page-hero-bg::after {
  content: "";
  position: absolute;
  top: -20%;
  right: 5%;
  width: 55%;
  height: 140%;
  background:
    radial-gradient(
      ellipse 50% 80% at 60% 40%,
      rgba(201, 169, 110, 0.07) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 30% 50% at 40% 70%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 60%
    );
  transform: rotate(-8deg);
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding-left: 8%;
  animation: heroIn 1s ease both;
}
.page-hero-script {
  font-family: var(--script);
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 0.2rem;
}
.page-hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--white);
  line-height: 1;
}

/*  OUR STORY SECTION  */
.our-story {
  padding: 6rem 8% 4rem;
  background: var(--white);
  position: relative;
}
.our-story-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 5rem;
}
.story-left {
  position: relative;
  padding-top: 1rem;
}
.story-bg-word {
  font-family: var(--script);
  font-size: 7rem;
  color: rgba(201, 169, 110, 0.12);
  position: absolute;
  top: -1rem;
  left: -1rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.story-heading {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
  padding-top: 3rem;
}
.story-right {
  padding-top: 0.5rem;
}
.story-year-title {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.story-body p {
  font-size: 0.83rem;
  color: var(--text-body);
  line-height: 1.95;
  margin-bottom: 1.1rem;
}
.story-body p:last-child {
  margin-bottom: 0;
}

/* Divider between story and stats */
.our-story::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 4rem;
}

/* Stats row */
.story-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 3rem 0;
}
.stat-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stat-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
}
.stat-divider {
  width: 1px;
  height: 60px;
  background: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/*  TEAM SECTION  */
.team-section {
  background: var(--light);
  padding: 6rem 8%;
}
.team-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.eyebrow-center {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
  display: block;
  margin-bottom: 0.6rem;
}
.team-heading {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 3.5rem;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.team-card {
  background: var(--white);
  overflow: hidden;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.team-img {
  height: 280px;
  overflow: hidden;
}
/* CSS silhouette placeholders for team members */
.team-img-silhouette {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.female-1 {
  width: 120px;
  height: 220px;
  background: linear-gradient(
    180deg,
    rgba(201, 169, 110, 0.15) 0%,
    rgba(201, 169, 110, 0.05) 100%
  );
  border-radius: 60px 60px 0 0;
}
.female-1::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 55px;
  background: rgba(201, 169, 110, 0.15);
  border-radius: 50%;
}
.female-1::after {
  content: "";
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 50px;
  background: rgba(201, 169, 110, 0.08);
  border-radius: 50% 50% 20% 20%;
}
.male-1 {
  width: 110px;
  height: 210px;
  background: linear-gradient(
    180deg,
    rgba(180, 180, 180, 0.12) 0%,
    rgba(180, 180, 180, 0.04) 100%
  );
  border-radius: 55px 55px 0 0;
}
.male-1::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 50px;
  background: rgba(180, 180, 180, 0.12);
  border-radius: 50%;
}
.female-2 {
  width: 115px;
  height: 215px;
  background: linear-gradient(
    180deg,
    rgba(201, 169, 110, 0.12) 0%,
    rgba(201, 169, 110, 0.04) 100%
  );
  border-radius: 58px 58px 0 0;
}
.female-2::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 52px;
  background: rgba(201, 169, 110, 0.12);
  border-radius: 50%;
}
.female-2::after {
  content: "";
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 55px;
  background: rgba(201, 169, 110, 0.06);
  border-radius: 40% 60% 20% 20%;
  transform: translateX(-50%) rotate(15deg);
}
.team-info {
  padding: 1.8rem;
}
.team-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}
.team-role {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.team-bio {
  font-size: 0.78rem;
  color: var(--text-body);
  line-height: 1.7;
}

/*  NEWSLETTER (dark band)  */
.about-newsletter {
  position: relative;
  background: var(--dark);
  padding: 6rem 3rem;
  text-align: center;
  overflow: hidden;
}
.about-nl-bg-script {
  position: absolute;
  bottom: -6rem;
  left: -2rem;
  font-family: var(--script);
  font-size: 30rem;
  color: rgba(201, 169, 110, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.about-nl-inner {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 0 auto;
}
.eyebrow-gold {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}
.about-nl-heading {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.05em;
  line-height: 1.35;
  margin-bottom: 2.5rem;
}
.about-nl-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
}
.about-nl-form input {
  flex: 1;
  padding: 0.9rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-right: none;
  background: transparent;
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.3s ease;
}
.about-nl-form input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.about-nl-form input:focus {
  border-color: var(--gold);
}

/*  STORY SPLIT (scissors section)  */
.story-split {
  background: var(--light);
  position: relative;
  overflow: hidden;
}
.story-split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}
.split-text {
  padding: 6rem 5rem 6rem 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: var(--white);
}
.split-bg-script {
  font-family: var(--script);
  font-size: 9rem;
  color: rgba(201, 169, 110, 0.1);
  position: absolute;
  top: 1rem;
  left: 4%;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.split-eyebrow {
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}
.split-heading {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.split-body {
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.9;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
/* Right image panel - decorative scissors via CSS art */
.split-image {
  position: relative;
  background: linear-gradient(135deg, #e8e4dd 0%, #d8d2c8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.scissors-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scissors-img-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 40% at 50% 55%,
      rgba(201, 169, 110, 0.15) 0%,
      transparent 70%
    ),
    url("https://images.unsplash.com/photo-1562322140-8baeececf3df?w=800&q=70")
      center/cover;
  opacity: 0.55;
}
/* Large decorative scissors drawn in SVG-like CSS */
.scissors-wrap::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) rotate(-20deg);
  width: 8px;
  height: 220px;
  background: linear-gradient(180deg, #aaa 0%, #888 40%, #666 100%);
  border-radius: 4px;
  box-shadow:
    40px 0 0 rgba(120, 100, 80, 0.3),
    40px 0 8px rgba(0, 0, 0, 0.1);
}
.scissors-wrap::after {
  content: "";
  position: absolute;
  top: 15%;
  left: calc(50% + 40px);
  transform: translateX(-50%) rotate(20deg);
  width: 8px;
  height: 220px;
  background: linear-gradient(180deg, #aaa 0%, #888 40%, #666 100%);
  border-radius: 4px;
}
.scissors-overlay-text {
  position: relative;
  z-index: 2;
  font-family: var(--script);
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.15);
  user-select: none;
}

/*  VALUES ROW  */
.values-section {
  background: var(--white);
  padding: 5rem 8%;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.values-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.value-icon {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.value-item:hover .value-icon {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.05);
}
.value-title {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.value-item p {
  font-size: 0.78rem;
  color: var(--text-body);
  line-height: 1.75;
}

/*  BACK TO TOP  */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 42px;
  height: 42px;
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 800;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--gold);
  border-color: var(--gold);
}

/*  REVEAL ANIMATIONS (same as homepage)  */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 {
  transition-delay: 0.12s;
}
.reveal-delay-2 {
  transition-delay: 0.24s;
}
.reveal-delay-3 {
  transition-delay: 0.36s;
}

/*  RESPONSIVE  */
@media (max-width: 900px) {
  .our-story-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .story-bg-word {
    font-size: 4.5rem;
  }
  .story-stats {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .stat-divider {
    display: none;
  }
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  .values-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .story-split-inner {
    grid-template-columns: 1fr;
  }
  .split-image {
    min-height: 300px;
  }
  .split-text {
    padding: 4rem 5%;
  }
  .page-hero {
    padding-bottom: 3rem;
  }
  .page-hero-content {
    padding-left: 5%;
  }
}

@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .values-inner {
    grid-template-columns: 1fr;
  }
  .our-story {
    padding: 4rem 5% 3rem;
  }
  .team-section {
    padding: 4rem 5%;
  }
  .page-hero-title {
    font-size: 2.5rem;
  }
  .story-stats {
    padding: 2rem 0;
  }
}