/* ============================================================
   Who We Are — Page Styles
   Matches Figma node 60:10
   ============================================================ */


/* ============================================================
   0. Active nav item
   ============================================================ */
.menuList li a.active {
  font-weight: 600;
}

@media (min-width: 992px) {
  .menuList li a.active::after {
    width: 100%;
  }
}


/* ============================================================
   1. Hero Banner — background + gradient override
   ============================================================ */
#hero::before {
  background-image: url('../images/who-we-are/hero.png');
}

/* Override the gradient direction to match Figma (-47deg: blue from bottom-left) */
#hero .wwa-banner-txt {
  background: linear-gradient(-47deg, rgba(25, 60, 142, 1) 0%, rgba(0, 0, 0, 0) 73%);
}

/* Breadcrumb inside hero */
.wwa-breadcrumb {
  font-size: clamp(13px, 0.833vw, 16px);
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.5px;
  margin-bottom: clamp(20px, 2.083vw, 40px);
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.wwa-breadcrumb a {
  color: rgba(255, 255, 255, 0.70);
  transition: color 0.2s ease;
}

.wwa-breadcrumb a:hover {
  color: #fff;
}

/* Hero title — Playfair Bold, 60px (overrides shared h1 weight) */
.wwa-hero-title {
  font-family: var(--font-secondary);
  font-size: clamp(36px, 3.125vw, 60px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.5;
  letter-spacing: -0.04em;
  margin: 0;
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}


/* ============================================================
   2. About Us Section
   ============================================================ */
.wwa-about-sec {
  /* padding: clamp(60px, 6.25vw, 120px) 0 clamp(50px, 5.208vw, 100px); */
  margin-bottom: 0;
}

/* Section heading: "About Us" */
.wwa-about__heading {
  font-family: var(--font-secondary);
  font-size: clamp(28px, 2.604vw, 50px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
  padding-top: 4px;
}

/* Lead italic line */
.wwa-about__lead {
  font-family: var(--font-primary);
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  font-style: italic;
  color: var(--color-blue);
  line-height: 1.55;
  margin-bottom: clamp(20px, 2.083vw, 40px);
}

/* Body paragraphs */
.wwa-about__body {
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: clamp(15px, 1.302vw, 25px);
}

.wwa-about__body:last-child {
  margin-bottom: 0;
}

/* Scroll-in animation — heading column slides from left */
.wwa-about-sec .col-lg-3,
.wwa-about-sec .col-md-4 {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.05s;
}

/* Content column: each child fades up with stagger */
.wwa-about-sec .col-lg-9 > *,
.wwa-about-sec .col-md-8 > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwa-about-sec .col-lg-9 > *:nth-child(1),
.wwa-about-sec .col-md-8 > *:nth-child(1) { transition-delay: 0.18s; }
.wwa-about-sec .col-lg-9 > *:nth-child(2),
.wwa-about-sec .col-md-8 > *:nth-child(2) { transition-delay: 0.30s; }
.wwa-about-sec .col-lg-9 > *:nth-child(3),
.wwa-about-sec .col-md-8 > *:nth-child(3) { transition-delay: 0.42s; }

.wwa-about-sec.is-visible .col-lg-3,
.wwa-about-sec.is-visible .col-md-4 {
  opacity: 1;
  transform: translateX(0);
}

.wwa-about-sec.is-visible .col-lg-9 > *,
.wwa-about-sec.is-visible .col-md-8 > * {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   3. Panoramic Image Section
   ============================================================ */
.wwa-panoramic-sec {
  margin-bottom: clamp(-50px, 5.208vw, -100px);
  position: relative;
  z-index: 1;
}

.wwa-panoramic__img-wrap {
  width: 100%;
  height: clamp(200px, 29.844vw, 573px);
  overflow: hidden;
  position: relative;
}

.wwa-panoramic__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease-in-out;
}

.wwa-panoramic__img-wrap:hover img {
  transform: scale(1.03);
}

/* Scroll-in animation */
.wwa-panoramic__img-wrap {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwa-panoramic-sec.is-visible .wwa-panoramic__img-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ============================================================
   4. Group Vintage Section — Blue background
   ============================================================ */
.wwa-gv-sec {
  background-color: var(--color-blue);
  padding: clamp(60px, 6.25vw, 120px) 0 clamp(60px, 6.25vw, 120px);
  position: relative;
  overflow: hidden;
}

/* Decorative vector elements at left and right edges */
.wwa-gv__deco {
  position: absolute;
  width: clamp(200px, 22.969vw, 441px);
  aspect-ratio: 441 / 464;
  background: url('../images/vector.png') no-repeat center / 100%;
  opacity: 0.08;
  pointer-events: none;
}

.wwa-gv__deco--left {
  top: 5%;
  left: -10%;
}

.wwa-gv__deco--right {
  bottom: 5%;
  right: -10%;
}

/* Title */
.wwa-gv__title {
  font-family: var(--font-secondary);
  font-size: clamp(28px, 2.604vw, 50px);
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: clamp(30px, 3.125vw, 60px);
}

/* ── Three-image gallery ── */
.wwa-gv__gallery {
  margin-bottom: clamp(40px, 4.167vw, 80px);
}

.wwa-gv__gallery-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 2.865vw, 55px);
}

.wwa-gv__gallery-img {
  overflow: hidden;
  position: relative;
  flex: 1;
}

.wwa-gv__gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.wwa-gv__gallery-img:hover img {
  transform: scale(1.04);
}

/* Side images (same height) */
.wwa-gv__gallery-img--left,
.wwa-gv__gallery-img--right {
  height: clamp(160px, 16.979vw, 326px);
}

/* Center image is taller and rises above the side images */
.wwa-gv__gallery-img--center {
  height: clamp(195px, 20.26vw, 389px);
}

/* Lead italic text (centered) */
.wwa-gv__lead {
  font-family: var(--font-primary);
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
  font-style: italic;
  color: var(--color-white);
  text-align: center;
  line-height: 1.5;
  margin-bottom: clamp(20px, 2.083vw, 40px);
}

/* Body text (centered) */
.wwa-gv__body {
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.75;
  max-width: clamp(600px, 60.313vw, 1158px);
  margin: 0 auto clamp(35px, 3.646vw, 70px);
}

.wwa-gv__body strong {
  font-weight: 600;
  color: var(--color-white);
}

/* CTA button override for white text inside blue section */
.wwa-gv__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* Scroll-in animations for Group Vintage */
.wwa-gv__title,
.wwa-gv__lead,
.wwa-gv__body,
.wwa-gv-sec .text-center {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwa-gv__title           { transition-delay: 0.05s; }
.wwa-gv__lead            { transition-delay: 0.50s; }
.wwa-gv__body            { transition-delay: 0.62s; }
.wwa-gv-sec .text-center { transition-delay: 0.74s; }

/* Gallery images — directional slide-in with stagger */
.wwa-gv__gallery-img--left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.18s;
}

.wwa-gv__gallery-img--center {
  opacity: 0;
  transform: translateY(50px) scale(0.97);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.30s;
}

.wwa-gv__gallery-img--right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.18s;
}

.wwa-gv-sec.is-visible .wwa-gv__title,
.wwa-gv-sec.is-visible .wwa-gv__lead,
.wwa-gv-sec.is-visible .wwa-gv__body,
.wwa-gv-sec.is-visible .text-center {
  opacity: 1;
  transform: translateY(0);
}

.wwa-gv-sec.is-visible .wwa-gv__gallery-img--left,
.wwa-gv-sec.is-visible .wwa-gv__gallery-img--right {
  opacity: 1;
  transform: translateX(0);
}

.wwa-gv-sec.is-visible .wwa-gv__gallery-img--center {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ============================================================
   5. Director Section
   ============================================================ */
.wwa-director-sec {
  /* padding: clamp(60px, 6.25vw, 120px) 0; */
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

/* Decorative element at top-left */
.wwa-director__deco {
  position: absolute;
  top: 0;
  left: clamp(-100px, -5vw, -50px);
  width: clamp(200px, 22.969vw, 441px);
  aspect-ratio: 441 / 464;
  background: url('../images/vector.png') no-repeat center / 100%;
  opacity: 0.06;
  pointer-events: none;
}

/* Profile image wrapper */
.wwa-director__img-wrap {
  width: 100%;
  position: relative;
  max-width: clamp(300px, 24.479vw, 470px);
}

.wwa-director__img-wrap img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.wwa-director__img-wrap .vector {top: -50px; z-index: -1;}

/* Content side */
.wwa-director__content {
  padding-top: clamp(10px, 1.042vw, 20px);
  padding-bottom: clamp(50px, 5.208vw, 100px );
}

/* Name */
.wwa-director__name {
  font-family: var(--font-secondary);
  font-size: clamp(24px, 2.604vw, 50px);
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: clamp(10px, 0.781vw, 15px);
}

/* Role / designation */
.wwa-director__role {
  font-family: var(--font-primary);
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 400;
  font-style: italic;
  color: var(--color-blue);
  margin-bottom: clamp(20px, 2.083vw, 40px);
}

/* Bio paragraphs */
.wwa-director__bio {
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: clamp(15px, 1.302vw, 25px);
}

.wwa-director__bio:last-child {
  margin-bottom: 0;
}

/* Scroll-in animations for director */
.wwa-director-sec .col-lg-auto {
  opacity: 0;
  transform: translateX(-48px) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.05s;
}

.wwa-director-sec .col-lg > .wwa-director__content > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwa-director-sec .col-lg .wwa-director__content > *:nth-child(1) { transition-delay: 0.22s; }
.wwa-director-sec .col-lg .wwa-director__content > *:nth-child(2) { transition-delay: 0.34s; }
.wwa-director-sec .col-lg .wwa-director__content > *:nth-child(3) { transition-delay: 0.46s; }
.wwa-director-sec .col-lg .wwa-director__content > *:nth-child(4) { transition-delay: 0.58s; }

.wwa-director-sec.is-visible .col-lg-auto {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.wwa-director-sec.is-visible .col-lg .wwa-director__content > * {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   6. Responsive Adjustments
   ============================================================ */
/* ── Tablet: keep side-by-side, shrink heights ── */
@media (max-width: 991.98px) {

  .wwa-about__heading {
    margin-bottom: clamp(20px, 3vw, 30px);
  }

  .wwa-gv__gallery-row {
    gap: clamp(6px, 1.5vw, 14px);
    align-items: flex-end;
  }

  .wwa-gv__gallery-img--left,
  .wwa-gv__gallery-img--right {
    height: clamp(140px, 20vw, 220px);
  }

  .wwa-gv__gallery-img--center {
    height: clamp(175px, 25vw, 270px);
  }

  .wwa-gv__body {
    max-width: 100%;
  }

  .wwa-director__content {
    padding-left: 0;
    padding-top: clamp(25px, 4vw, 40px);
  }

  .wwa-director__img-wrap {
    max-width: 100%;
  }
}

/* ── Small tablet / large mobile: tighten further ── */
@media (max-width: 767.98px) {

  .wwa-gv__gallery-row {
    gap: 8px;
  }

  .wwa-gv__gallery-img--left,
  .wwa-gv__gallery-img--right {
    height: clamp(110px, 22vw, 180px);
  }

  .wwa-gv__gallery-img--center {
    height: clamp(140px, 28vw, 220px);
  }
}

/* ── Mobile: keep all three images side-by-side (same as desktop) ── */
@media (max-width: 575.98px) {

  .wwa-gv__gallery-row {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-end;
  }

  .wwa-gv__gallery-img--left,
  .wwa-gv__gallery-img--right {
    flex: 1;
    height: clamp(90px, 25vw, 140px);
  }

  .wwa-gv__gallery-img--center {
    flex: 1;
    order: 0;
    width: auto;
    height: clamp(115px, 32vw, 175px);
  }
}


@keyframes wwa-vector-float-left {
  0%, 100% { transform: translateY(-50%) translateX(0px) rotate(0deg); }
  33%       { transform: translateY(-54%) translateX(-8px) rotate(-2deg); }
  66%       { transform: translateY(-46%) translateX(-4px) rotate(1deg); }
}

@keyframes wwa-vector-float-right {
  0%, 100% { transform: translateY(-50%) translateX(0px) rotate(0deg); }
  33%       { transform: translateY(-46%) translateX(8px) rotate(2deg); }
  66%       { transform: translateY(-54%) translateX(4px) rotate(-1deg); }
}

.wwa-gv-sec .vector {top: 35%; transform: translateY(-50%); width: clamp(200px, 23.438vw, 450px);}

.wwa-gv-sec .vector--left {
  right: 88%;
  animation: wwa-vector-float-left 6s ease-in-out infinite;
}

.wwa-gv-sec .vector--right {
  left: 88%;
  animation: wwa-vector-float-right 6s ease-in-out infinite;
}