/* ============================================================
   EIVAA HOMESS — About Us Page · about.css
   Inherits global style.css — only page-specific overrides here
   Light Luxury Theme · #F9F8F6 Background
   ============================================================ */

/* ── PAGE-LEVEL OVERRIDES ── */
/* Override the dark body background from the homepage for this light page */
.about-page {
  background: #F9F8F6;
  color: #1A1A1A;
}

/* ─────────────────────────────────────────────────
   NAVIGATION HEADER (About page variant)
───────────────────────────────────────────────── */
.ab-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(24px, 5vw, 72px);
  
  /* OVERRIDE INHERITED INVISIBLE STATE */
  opacity: 1 !important;
  transform: none !important;
}



/* ─────────────────────────────────────────────────
   SECTION 1 — HERO
───────────────────────────────────────────────── */
#ab-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.ab-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ab-hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(0px) brightness(0.45);
  transform: scale(1.05);
  transition: filter 1.2s ease;
}

.ab-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
}

.ab-hero-content {
  position: relative;
  z-index: 10;
  text-align: left;
  padding: clamp(64px, 12vh, 120px) clamp(24px, 5vw, 64px);
}

.ab-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(253, 253, 253, 0.6);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px);
}

.ab-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--ink);
  max-width: 1200px;
  margin-bottom: 32px;
  opacity: 0;  /* controlled by JS */
  will-change: opacity, transform;
}

.ab-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(24px, 1.4vw, 17px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.3em;
  color: var(--ink-muted);
  max-width: 1200px;
  margin-bottom: 48px;
  opacity: 0;  /* controlled by JS */
  will-change: opacity, transform;
  align-content: center;
}

.ab-scroll-indicator {
  position: absolute;
  bottom: 36px;
  right: clamp(24px, 5vw, 72px);
  z-index: 10;
}

/* ─────────────────────────────────────────────────
   SECTION 2 — THE BEGINNING (Pinned Scrollytelling)
───────────────────────────────────────────────── */
#ab-section2 {
  position: relative;
  height: 400vh;
  background: #F9F8F6;
}

.ab-s2-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(24px, 8vw, 140px);
  overflow: hidden;
}

.ab-s2-progress-line {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 120px;
  background: rgba(26, 26, 26, 0.10);
}

.ab-s2-progress-fill {
  width: 100%;
  height: 0%;
  background: #C9A96E;
  transition: height 0.3s ease;
}

.ab-s2-phase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(60px, 12vw, 200px);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  /* NOTE: GSAP drives opacity/transform here — no CSS transition,
     it would fight the scrubbed timeline. */
}

/* ── Word mask — each word sits inside an overflow:hidden sleeve
   so it can be lifted into view instead of faded in. ── */
.ab-s2-statement .msk {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders (g, y, p) so the mask never clips them */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.ab-s2-statement .msk-i {
  display: inline-block;
  will-change: transform;
}

/* Paragraph word spans — start muted, scrub to full ink */
.ab-s2-word {
  display: inline;
  opacity: 0.22;
  will-change: opacity;
  transition: none; /* GSAP controls this */
}

.ab-s2-statement {
  font-family: var(--font-display); /* Fraunces — same as hero headline */
  font-size: clamp(32px, 5.5vw, 76px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #2C2A28;
  text-align: center;
  max-width: 1200px;
}

.ab-s2-statement em {
  font-style: italic;
  color: #C9A96E;
}

.ab-s2-paragraph {
  font-family: var(--font-body);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.01em;
  max-width: 1000px;
  text-align: center;
  color: #2C2A28;
}

/* ─────────────────────────────────────────────────
   SECTION 3 — OUR APPROACH (Sticky Split-Screen)
───────────────────────────────────────────────── */
#ab-section3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  background: #F9F8F6;
}

.ab-s3-left {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.ab-s3-image-wrap {
  width: 100%;
  height: 100%;
}

.ab-s3-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ab-s3-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18vh clamp(40px, 6vw, 90px) 18vh clamp(48px, 5vw, 80px);
}

.ab-s3-header {
  margin-bottom: 8vh;
}

.ab-s3-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C9A96E;
  margin-bottom: 24px;
}

.ab-s3-headline {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1A1A1A;
}

.ab-s3-block {
  padding: 6vh 0;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.ab-s3-body {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(26, 26, 26, 0.72);
  margin-bottom: 16px;
}

.ab-s3-emphasis {
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  color: #1A1A1A;
  font-weight: 400;
  margin-bottom: 0;
}

/* Stats row */
.ab-s3-stats {
  display: flex;
  gap: clamp(32px, 5vw, 64px);
  padding: 6vh 0;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.ab-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ab-stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1;
}

.ab-stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.45);
}

/* ── Scroll reveal helper ── */
.ab-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.ab-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────
   SECTION 4 — OUR JOURNEY (PINNED HORIZONTAL FILM STRIP)
   Reuses the homepage's .cf-* film-strip system (style.css).
   Only the palette scope and the two About-only pieces
   (the year line, the closing panel) live here.
───────────────────────────────────────────────── */
#ab-section4 {
  /* Cinematic dark ground. The cream version left the strip feeling
     empty — the images need the dark surround to hold the screen.
     These override the light defaults #section4 sets in style.css. */
  --paper:      #FDFDFD;   /* primary light text on dark */
  --espresso:   #0A0A0A;   /* near-black section ground */
  --clay:       #C9A96E;   /* soft gold accent */
  --line-dark:  rgba(253, 253, 253, 0.14);

  --cf-ink-soft:   rgba(253, 253, 253, 0.72);
  --cf-ink-mute:   rgba(253, 253, 253, 0.62);
  --cf-ink-stroke: rgba(253, 253, 253, 0.42);
  --cf-scrim:      rgba(10, 10, 10, 0.72);

  position: relative;
  overflow: hidden;
  background: var(--espresso);
  color: var(--paper);
}

/* Year sits between the project name and its description */
#ab-section4 .cf-year {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}

/* Closing panel — travels at the end of the strip */
.cf-outro {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.cf-outro-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--cf-ink-mute);
  white-space: nowrap;
}

.cf-outro-text em {
  font-style: normal;
  color: var(--clay);
}

.cf-outro-line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 80px;
  background: var(--line-dark);
}

.cf-horizontal .cf-outro {
  flex: none;
  width: 34vw;
  min-width: 380px;
}

/* ─────────────────────────────────────────────────
   FOOTER OVERRIDE for light page
───────────────────────────────────────────────── */
.about-page #site-footer {
  background: #F9F8F6;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  #ab-section3 {
    grid-template-columns: 1fr;
  }

  .ab-s3-left {
    position: relative;
    height: 55vw;
  }

  .ab-s3-right {
    padding: 10vw clamp(24px, 5vw, 48px);
  }

  .ab-s3-stats {
    flex-wrap: wrap;
    gap: 24px;
  }

  .ab-hero-headline {
    font-size: clamp(32px, 9vw, 64px);
  }

  .ab-s2-statement {
    font-size: clamp(22px, 6vw, 40px);
  }
}