/* ==========================================================================
   About Page — hero screen only.
   Reuses global tokens/classes already shipped in style.css / inline.css
   (--color-cyan-300, .font-display, .st-cta button, header/mobile-header
   classes). Nothing here overrides homepage selectors.
   ========================================================================== */

.about-page {
  background: #05080a;
}

/* ---------- Hero shell ---------- */
/* hero-bg.webp is the section's own background (not a boxed <img>), so it
   always fills the viewport via cover/center/no-repeat. Every piece of UI
   below is absolutely positioned directly over it — an editorial
   composition, not a two-column/boxed layout. */
.about-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background-image: url('/assets/about/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Subtle dark overlay for readability — warm, not a flat/cold black */
.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(10, 8, 6, 0.45);
}

/* ---------- Left: massive editorial headline ---------- */
.about-hero-headline {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(-50%);
  max-width: 44vw;
}

.about-hero-heading {
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: clamp(3rem, 6.8vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1.75rem;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.about-hero-sub {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 26rem;
  margin: 0;
}

/* Tiny section number, bottom-left */
.about-hero-number {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(6rem, 12vh, 8rem);
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Right: floating feature heading, middle-right ---------- */
.about-hero-feature {
  position: absolute;
  z-index: 1;
  right: clamp(2rem, 9vw, 9rem);
  top: 48%;
  width: clamp(180px, 16vw, 240px);
}

.about-hero-feature-title {
  display: block;
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.9rem;
}

.about-hero-feature-line {
  display: block;
  width: 92%;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.9rem;
}

.about-hero-feature-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00ACCD;
  text-decoration: none;
  transition: color 0.3s ease, gap 0.3s ease;
}

.about-hero-feature-more:hover {
  gap: 0.65rem;
  color: #ffffff;
}

/* ---------- Floating glassmorphism stat card, upper-right ----------
   Matches the same glass recipe already used for .about-hero-bottomnav-btn
   in this hero (rgba(10,10,10,.55) + blur + thin white border), so it
   reads as part of the same visual language rather than a new style. */
.about-hero-product {
  position: absolute;
  z-index: 1;
  right: clamp(2rem, 8vw, 8.5rem);
  bottom: clamp(8rem, 16vh, 10.5rem);
  width: clamp(150px, 14vw, 200px);
  padding: 1.25rem 1.4rem;
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.about-hero-product-value {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: #00ACCD;
}

.about-hero-product-label {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Bottom navigation ---------- */
.about-hero-bottomnav {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
}

.about-hero-bottomnav-center {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.about-hero-bottomnav-center a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.3s ease;
}

.about-hero-bottomnav-center a:hover {
  color: #ffffff;
}

.about-hero-bottomnav-btn {
  position: absolute;
  right: clamp(1.5rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  border-radius: 9999px;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.about-hero-bottomnav-btn:hover {
  background: #00ACCD;
  border-color: #00ACCD;
}

/* ---------- Responsive ---------- */

/* Tablet: keep the composition, tighten offsets */
@media (max-width: 1180px) {
  .about-hero-headline {
    max-width: 54vw;
  }

  .about-hero-feature {
    width: clamp(150px, 20vw, 200px);
  }

  .about-hero-product {
    width: clamp(140px, 16vw, 170px);
    padding: 1rem 1.15rem;
  }
}

/* Below 1024px: right-side floats move up under the header, headline
   keeps the page and stays the dominant element */
@media (max-width: 1023px) {
  .about-hero-headline {
    max-width: 70vw;
    top: 42%;
  }

  .about-hero-feature,
  .about-hero-product {
    display: none;
  }

  .about-hero-number {
    bottom: clamp(5.5rem, 14vh, 7rem);
  }
}

@media (max-width: 768px) {
  .about-hero {
    height: 100svh;
  }

  .about-hero-overlay {
    background: rgba(10, 8, 6, 0.55);
  }

  .about-hero-headline {
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    max-width: 88vw;
    text-align: center;
  }

  .about-hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .about-hero-number {
    left: 50%;
    transform: translateX(-50%);
  }

  .about-hero-bottomnav {
    flex-direction: column;
    gap: 1rem;
    bottom: clamp(1.25rem, 5vh, 2rem);
  }

  .about-hero-bottomnav-btn {
    position: static;
    transform: none;
  }
}

@media (max-width: 480px) {
  .about-hero-heading {
    font-size: clamp(2.4rem, 11vw, 3rem);
  }
}

/* ==========================================================================
   Features — "Why Choose Hompac"
   Reveal-once-on-scroll: js/about.js adds .is-visible to .about-features
   the first time it enters the viewport; each .reveal-up child then
   transitions in with its own reveal-delay-N stagger, never repeating.
   ========================================================================== */

.about-features {
  position: relative;
  width: 100%;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  background:
    radial-gradient(circle at 80% 0%, rgba(0, 172, 205, 0.1), transparent 45%),
    radial-gradient(circle at 10% 100%, rgba(0, 75, 107, 0.22), transparent 40%),
    linear-gradient(180deg, #050708 0%, #060b0e 100%);
}

.about-features-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.about-features-header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}

.about-features-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #00ACCD;
  margin-bottom: 1.25rem;
}

.about-features-label::before,
.about-features-label::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: #00ACCD;
}

.about-features-heading {
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 3.25rem);
  line-height: 1.18;
  color: #ffffff;
  margin: 0;
}

/* ---------- Card grid ---------- */
.about-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2rem);
}

.about-feature-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  /* opacity/transform/filter (entrance blur+3D tilt, scroll parallax,
     hover lift+scale) are owned entirely by GSAP in js/about.js —
     animated as inline styles every tick, so no CSS transition is
     declared for them here. A CSS transition on a property GSAP is
     actively tweening double-smooths it (the browser re-eases GSAP's
     own already-eased per-frame writes), which was making the
     entrance's blur/scale read as muted instead of cinematic. Only
     the remaining non-GSAP hover touches (shadow/border) transition
     via CSS, matching the ~0.45s hover timing GSAP uses for the rest
     of that same interaction. */
  transition: box-shadow 0.45s ease, border-color 0.45s ease;
}

.about-feature-card:hover {
  border-color: rgba(0, 172, 205, 0.4);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  filter: brightness(1.08);
}

.about-feature-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.about-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Zoom-on-hover for the two photo cards is driven by GSAP (js/about.js,
     scale: 1.06) so it can be skipped on the middle text-forward card —
     no CSS transform/transition declared here to avoid it fighting GSAP's
     inline styles. */
}

/* Dark glass gradient so the "Card 0X" badge stays legible over any photo */
.about-feature-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}

.about-feature-index {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.about-feature-body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.about-feature-title {
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: #ffffff;
  margin: 0;
}

.about-feature-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.about-feature-stat {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00ACCD;
}

/* ---------- Middle card: text-only panel, same outer card size ----------
   No .about-feature-media/img here — .about-features-grid stretches every
   grid item to equal height by default, so this card still matches its
   photo siblings' outer size; the panel just fills that height instead
   of a fixed aspect-ratio image block. */
.about-feature-card--text {
  background:
    radial-gradient(circle at 30% 0%, rgba(0, 172, 205, 0.1), transparent 55%),
    rgba(255, 255, 255, 0.03);
}

.about-feature-textpanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 3vw, 2.75rem);
}

.about-feature-textpanel-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00ACCD;
  background: rgba(0, 172, 205, 0.1);
  border: 1px solid rgba(0, 172, 205, 0.3);
  margin-bottom: 1.5rem;
}

.about-feature-textpanel-heading {
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 0.85rem;
}

.about-feature-textpanel-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.about-feature-textpanel-divider {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: #00ACCD;
  margin: 1.5rem 0;
}

.about-feature-textpanel-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.about-feature-textpanel-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

.about-feature-textpanel-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ACCD;
}

/* ---------- Scroll animation (GSAP + ScrollTrigger, see js/about.js) ----------
   The entrance/parallax/hover motion itself is entirely GSAP-driven
   (inline transform/opacity), so it isn't declared here. This is only
   the pre-JS baseline: the label, heading and cards start invisible so
   there's no flash of fully-visible content before about.js runs and
   gsap.set() takes over. GSAP overwrites this opacity the instant it
   initializes; if JS fails to load, about.js's no-GSAP fallback forces
   opacity back to 1 so content is never stuck hidden. */
.about-features-label,
.about-features-heading,
.about-feature-card {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .about-features-label,
  .about-features-heading,
  .about-feature-card {
    opacity: 1;
  }
}

/* ---------- Responsive ---------- */

/* Tablet: 2 columns */
@media (max-width: 1023px) {
  .about-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-feature-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - clamp(1.5rem, 2.5vw, 2rem) / 2);
    margin: 0 auto;
  }
}

/* Mobile: single column, full-width cards */
@media (max-width: 640px) {
  .about-features-grid {
    grid-template-columns: 1fr;
  }

  .about-feature-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }

  .about-features-header {
    text-align: center;
  }
}
.about-features-grid {
  perspective: 1600px;
  transform-style: preserve-3d;
  overflow: visible;
}

.about-feature-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  will-change: transform, opacity;
}

/* Reduces media height slightly so cards complete animation inside the viewport */
.about-feature-card .about-feature-media {
  max-height: 220px;
  object-fit: cover;
}
/* ==========================================================
   Mission & Vision Section (Full Right-Half & Glassmorphism)
   ========================================================== */

/* Main Container */
.mission-vision-section {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Same brand navy/cyan gradient formula as the Features section above
     it (a stray extra "(" around rgb(...) here was invalidating the
     whole background shorthand, so this was silently rendering as flat
     black/transparent instead of the intended brand gradient). */
  background:
    radial-gradient(circle at 80% 0%, rgba(0, 172, 205, 0.1), transparent 45%),
    radial-gradient(circle at 10% 100%, rgba(0, 75, 107, 0.22), transparent 40%),
    linear-gradient(180deg, rgb(4, 24, 33) 0%, #060b0e 100%);
  overflow: hidden;
}

.mv-pin-container {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr; /* Fixed 40/60 split for a dominant image side */
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0; /* Remove container padding so image touches top/bottom/right edges */
  box-sizing: border-box;
}

/* Left Column: Sticky Title & Brand Accent */
.mv-left-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 30%;
  z-index: 2;
}

.mv-badge {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #00a8cc; /* Hompac Brand Cyan Accent */
  margin-bottom: 20px;
}

.mv-sticky-title {
  position: relative;
  font-size: 4.5rem;
  font-weight: 700;
  color: #ffffff;
  height: 90px;
}

.mv-title-text {
  position: absolute;
  top: 0;
  left: 0;
}

.mv-title-vision {
  opacity: 0;
  transform: translateY(30px);
}

/* Right Column: Full Edge-to-Edge Image Container */
.mv-right-col {
  position: relative;
  width: 100%;
  height: 100vh; /* Fills full height of the viewport */
  overflow: hidden;
  /* border-top-left-radius: 32px; */
  /* border-bottom-left-radius: 32px; */
}

.mv-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Baseline pre-scroll state: vision starts hidden so the pinned
   ScrollTrigger timeline (js/about.js) has something to cross-fade
   from — without this, .mv-bg-vision rendered at its default opacity:1
   and permanently covered the mission image (later in DOM order),
   so the "opacity: 0 -> 1" tween on it was a no-op and no image
   transition was ever visible. */
.mv-bg-vision {
  opacity: 0;
}

.mv-bg-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.mv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* Subtle dark overlay for contrast */
}

/* Glassmorphism Text Card Container */
.mv-content-container {
  position: absolute;
  bottom: 8%;
  left: 8%;
  right: 8%;
  z-index: 3;
}

.mv-content-block {
  position: relative;
  padding: 32px 40px;
  max-width: 580px;
  color: #ffffff;

  /* Glassmorphism Styling */
  background: rgba(18, 22, 28, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.mv-content-block h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.mv-content-block p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

.mv-content-vision {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(40px);
}

/* ---------- Responsive ---------- */

/* Tablet: keep the two-column pinned layout, scale proportions down so
   the title, image and glass card fit without overflow/overlap. */
@media (max-width: 1023px) and (min-width: 768px) {
  .mv-pin-container {
    grid-template-columns: 0.42fr 0.58fr;
  }

  .mv-left-col {
    padding-left: 8%;
  }

  .mv-badge {
    font-size: 0.75rem;
    margin-bottom: 14px;
  }

  .mv-sticky-title {
    font-size: clamp(2.75rem, 6vw, 3.75rem);
    height: 74px;
  }

  .mv-content-container {
    left: 6%;
    right: 6%;
    bottom: 7%;
  }

  .mv-content-block {
    padding: 26px 30px;
    max-width: 420px;
  }

  .mv-content-block h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .mv-content-block p {
    font-size: 0.92rem;
    line-height: 1.55;
  }
}

/* Mobile: turn the pinned two-column composition into a stacked,
   full-screen (100vh) slide sequence — the right column's background
   image becomes a full-bleed backdrop, and the left column's
   badge/title float on top of it along with the glass text card,
   recreating the same premium layered look at a single-column scale.
   The GSAP timeline (js/about.js) still drives the Mission -> Vision
   cross-fade; only the pinned scroll distance is shortened there. */
@media (max-width: 767px) {
  .mv-pin-container {
    display: block;
    position: relative;
    height: 100vh;
  }


  /* Badge + heading block. top:9% (a percentage of the section's own
     100vh, so it already scales with viewport height) is deliberately
     NOT also given a bottom/height constraint - .mv-sticky-title's own
     fixed 56px reservation plus the badge's own line-height give this
     block a small, predictable footprint (~90px) that the content
     card's own top offset below is sized against. */
  .mv-left-col {
    position: absolute;
    top: 9%;
    left: 0;
    right: 0;
    padding: 0 7%;
    justify-content: flex-start;
    z-index: 3;
  }

  .mv-badge {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
  }

  .mv-sticky-title {
    font-size: clamp(2.25rem, 11vw, 3rem);
    height: 56px;
  }

  .mv-right-col {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
  }

  /* Dark gradient overlay so the heading/text stay legible over the
     full-screen background image, per the requested mobile treatment. */
  .mv-overlay {
    background: linear-gradient(
      180deg,
      rgba(4, 10, 14, 0.25) 0%,
      rgba(4, 10, 14, 0.5) 55%,
      rgba(2, 6, 9, 0.92) 100%
    );
  }

  /* Content card - was bottom-anchored (bottom:9%, later overridden to
     bottom:35% by a stray duplicate of this same media query further
     down the file), which positioned it with zero relationship to
     .mv-left-col's own height above it. Any combination of a shorter
     viewport and a longer Mission/Vision description (both slides'
     card content lengths differ, and only one is ever visible at a
     time - see .mv-content-mission/.mv-content-vision below) could
     push the card's top edge up into the heading, which is exactly
     the reported overlap. Anchoring from the top instead - offset by
     the same top:9% the heading block starts at, plus its own ~90px
     footprint, plus a real gap - means the card can only ever grow
     further DOWN the viewport as its content gets taller, never back
     up into the heading, regardless of which slide is active or how
     tall the phone is. */
  .mv-content-container {
    left: 6%;
    right: 6%;
    top: calc(9% + 128px);
    bottom: auto;
    z-index: 3;
  }

  .mv-content-block {
    padding: 20px 22px;
    max-width: 100%;
  }

  .mv-content-block h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .mv-content-block p {
    font-size: 0.92rem;
    line-height: 1.55;
  }
}

/* ==========================================================
   Luxury FAQ Section Styling
   ========================================================== */

.faq-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 120px 8%;
  background-color: #0d0e10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* Background Atmosphere (Warm Wood, LED Glow, Woven Cane Texture) */
.faq-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Replace with your high-res ambient background image path */
  background: url('../assets/faq-background.jpg') center/cover no-repeat;
  filter: brightness(0.7) contrast(1.05);
  z-index: 1;
}

.faq-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 14, 16, 0.75) 0%,
    rgba(13, 14, 16, 0.4) 50%,
    rgba(13, 14, 16, 0.85) 100%
  );
}

/* Container */
.faq-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Header Typography */
.faq-header {
  margin-bottom: 60px;
}

.faq-badge {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #00a8cc; /* Hompac Brand Accent */
  margin-bottom: 16px;
}

.faq-title {
  font-family: 'Playfair Display', 'Cinzel', 'Georgia', serif;
  font-size: clamp(3rem, 6vw, 4.8rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Accordion List */
.faq-accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: border-color 0.3s ease;
}

.faq-item:hover {
  border-bottom-color: rgba(0, 168, 204, 0.4);
}

.faq-question {
  width: 100%;
  padding: 28px 0;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: #00a8cc;
}

.faq-icon {
  font-size: 1.6rem;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  margin-left: 20px;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg); /* Rotates '+' into 'x' */
  color: #00a8cc;
}

/* Expandable Answer Drawer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-answer p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  padding-bottom: 28px;
  max-width: 850px;
}

/* Bottom Caption */
.faq-caption {
  margin-top: 32px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
/* Warm Ambient Background Layer */
.faq-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
  /* Replace with your image file path */
  background-image: url('../assets/faq-background.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  /* Ambient lighting & contrast tune */
  filter: brightness(0.65) contrast(1.1);
  z-index: 1;
}

/* Gradient overlay to guarantee contrast over any background image */
.faq-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 28%) 0%,
    rgba(13, 14, 16, 0.35) 50%,
    rgb(0 63 90 / 52%) 100%)
}
.faq-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.65) contrast(1.1);
}

/* ==========================================================================
   Team -> Footer curtain reveal
   Same technique as the Home page's .testimonial-footer-container /
   #testimonials / #footer (see css/inline.css): a fixed-height,
   overflow-hidden wrapper is pinned while the top layer (the Team
   section, once its own horizontal card sequence finishes) is
   scrubbed from yPercent 0 to -100, sliding away to reveal the
   footer — which stays completely static underneath — like a
   curtain opening. js/script.js drives the single coordinated GSAP
   ScrollTrigger (pinned card scroll, then reveal); this only sets up
   the two absolutely-positioned, stacked layers. #footer itself needs
   no new CSS here — it already reuses the exact
   position:absolute;inset:0;z-index:1 from inline.css's shared #footer
   rule, same as on the Home page.
   ========================================================================== */
.faq-footer-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.faq-footer-container #team-section {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100vh;
  will-change: transform;
  /* Matches #footer's gradient below so the reveal (team section
     sliding up via yPercent -100) shows one continuous background,
     not a seam where two different dark colors meet. */
  background: radial-gradient(circle at right top, rgb(0, 0, 0), transparent 35%), radial-gradient(circle at left bottom, rgba(0, 12, 41, 0.25), transparent 30%), linear-gradient(135deg, rgb(17, 32, 40) 0%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 100%);
}

/* Mobile: drop the curtain, keep the card pin. #team-section still
   pins on its own (see js/script.js's initTeamFooter -> buildSequence(),
   called with includeCurtain:false below 768px) while its 4 cards
   reveal one at a time - only the yPercent:-100 "slide the whole
   section away" phase is skipped there. So here the wrapper/section
   just need to stop being the curtain's two stacked absolute layers
   and go back to plain flow, exactly the same "drop the pin/curtain
   for a plain stacked flow instead" fallback already used by
   .furniture-footer-container's own mobile override above - #footer
   flows normally right after the Team section finishes, the same way
   it does on projects.php. */
@media (max-width: 767px) {
  .faq-footer-container {
    height: auto;
    overflow: visible;
  }

  .faq-footer-container #team-section {
    position: relative;
    inset: auto;
    z-index: auto;
  }

  /* inline.css's #footer{position:absolute;inset:0;z-index:1} rule is
     declared unconditionally (outside any media query), so it wins over
     this reset regardless of source order without the same (class + id)
     specificity here too - matching .furniture-footer-container #footer's
     own mobile fix above. */
  .faq-footer-container #footer {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    height: auto;
    z-index: auto;
  }
}

/* ==========================================================================
   Team - names-only editorial list (replaces the card layout; the old
   .team-track/.team-card rules in style.css are now unused but left as-is).
   Sits in the existing #team-section curtain layer, so the footer reveal
   in .faq-footer-container above is untouched.
   ========================================================================== */
.team-section.team-names-section {
  align-items: stretch;
  justify-content: stretch;
}

.team-names-inner {
  width: 100%;
  height: 100%;
  padding: clamp(5.5rem, 12vh, 8rem) 5vw clamp(2rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.team-names-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  font-weight: 700;
  color: #00accd;
  padding-bottom: 1.25rem;
}

.team-names-count {
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.15em;
}

.team-names-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-names-item {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(0.6rem, 2vh, 1.4rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  cursor: default;
  transition: opacity 0.4s ease;
}

.team-names-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.team-names-index {
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
  min-width: 2.5ch;
  transition: color 0.4s ease;
}

.team-names-name {
  display: block;
  font-size: clamp(2.2rem, 8vw, 7.5rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
  will-change: transform;
}

/* Awwwards-style hover: everything else dims, the hovered name slides
   right and takes the accent colour. */
@media (hover: hover) {
  .team-names-list:hover .team-names-item { opacity: 0.35; }
  .team-names-list .team-names-item:hover { opacity: 1; }
  .team-names-item:hover .team-names-name { transform: translateX(1.5vw); color: #00accd; }
  .team-names-item:hover .team-names-index { color: #00accd; }
}

@media (max-width: 767px) {
  .team-section.team-names-section {
    height: auto;
    min-height: 100vh;
  }
  .team-names-name {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }
}


/* ==========================================================================
   Meet the Team - responsive name + designation grid (about.html).
   Add a member by copying one <li class="meet-team-card">; auto-fill grid.
   ========================================================================== */
.meet-team {
  background: #0b0b0b;
  color: #fff;
  padding: clamp(4rem, 10vw, 8rem) 5vw;
  overflow: hidden;
  box-sizing: border-box;
}
.meet-team-inner { max-width: 1320px; margin: 0 auto; }
.meet-team-header { text-align: center; max-width: 640px; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); }
.meet-team-eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  font-weight: 700;
  color: #00accd;
  margin-bottom: 0.75rem;
}
.meet-team-heading {
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.meet-team-sub { font-size: 0.95rem; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin: 0; }

.meet-team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 1100px) { .meet-team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1099px) { .meet-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .meet-team-grid { grid-template-columns: 1fr; } }

.meet-team-card {
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  min-width: 0;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease, background 0.35s ease;
}
.meet-team.is-visible .meet-team-card { opacity: 1; transform: none; }
.meet-team.is-visible .meet-team-card:nth-child(2) { transition-delay: 0.1s, 0.1s, 0s, 0s; }
.meet-team.is-visible .meet-team-card:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
.meet-team.is-visible .meet-team-card:nth-child(4) { transition-delay: 0.3s, 0.3s, 0s, 0s; }
.meet-team.is-visible .meet-team-card:nth-child(n+5) { transition-delay: 0.4s, 0.4s, 0s, 0s; }
@media (hover: hover) {
  .meet-team.is-visible .meet-team-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 172, 205, 0.5);
    background: rgba(255, 255, 255, 0.04);
    transition-delay: 0s;
  }
}
.meet-team-name {
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}
.meet-team-role { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .meet-team-card { opacity: 1; transform: none; transition: none; }
}


/* Meet the Team as the footer curtain layer (same technique as the old
   #team-section: pinned wrapper, this layer slides up to uncover #footer). */
.faq-footer-container #meet-team {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100vh;
  display: flex;
  align-items: center;
  will-change: transform;
  padding-top: 4rem;
  padding-bottom: 2rem;
  background: radial-gradient(circle at right top, rgb(0, 0, 0), transparent 35%), radial-gradient(circle at left bottom, rgba(0, 12, 41, 0.25), transparent 30%), linear-gradient(135deg, rgb(17, 32, 40) 0%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 100%);
}
.faq-footer-container #meet-team .meet-team-inner { width: 100%; }
.faq-footer-container #meet-team .meet-team-header { margin-bottom: clamp(1.5rem, 4vh, 3rem); }

@media (max-width: 767px) {
  .faq-footer-container #meet-team {
    position: relative;
    inset: auto;
    z-index: auto;
    height: auto;
    padding-top: clamp(4rem, 10vw, 8rem);
    padding-bottom: clamp(4rem, 10vw, 8rem);
  }
}