/* ==========================================================
   ABOUT PAGE — section-specific styles
   ========================================================== */

.ibe-about-body {
  background: #FAF5EE;
  color: #434142;
}

/* ========== Top nav light variant (cream bg, dark content) ========== */
.ibe-topnav--light {
  position: relative;            /* sits at top of page, not over hero */
  background: #FAF5EE;
  padding: 1.5rem 3rem;
}
.ibe-topnav--light .ibe-lang-switcher a { color: #434142; opacity: 0.55; }
.ibe-topnav--light .ibe-lang-switcher a.active { opacity: 1; }
.ibe-topnav--light .ibe-lang-switcher a.active::after { background: #434142; height: 1px; }
.ibe-topnav--light .ibe-lang-switcher a:hover { opacity: 1; }
.ibe-topnav--light .ibe-menu-btn { color: #434142; }
.ibe-topnav--light .ibe-menu-btn__lines span { background: #434142; }
.ibe-topnav--light .ibe-logo { height: 56px; top: 1rem; }

/* ========== Main spacing ========== */
.ibe-about-main {
  padding-top: 2rem;
}

/* ========== Clients section ========== */
.ibe-clients {
  background: #FAF5EE;
  padding: 5rem 0 6rem;
  overflow: hidden;
}
.ibe-clients__head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.ibe-clients__title {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: 0;
  color: #434142;
  margin: 0;
}

/* ========== Marquee (infinite logo strip) ========== */
.ibe-marquee {
  width: 100%;
  overflow: hidden;
}
.ibe-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: ibeMarquee 42s linear infinite;
}
.ibe-marquee:hover .ibe-marquee__track { animation-play-state: paused; }
.ibe-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.9rem;
  min-width: 140px;
  height: 80px;
}
@keyframes ibeMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* placeholder pseudo-logos — replace with real images later */
.ibe-logo-placeholder {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0;
  color: #434142;
  line-height: 1.05;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.ibe-logo-placeholder small {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 2px;
  opacity: 0.7;
}
.ibe-marquee__item:hover .ibe-logo-placeholder { opacity: 1; }
.ibe-logo-placeholder--ar { font-family: 'Zalando Sans Expanded', sans-serif; }

/* client logo images (when real images are uploaded) */
.ibe-client-logo {
  max-height: 70px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 1;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.ibe-marquee__item:hover .ibe-client-logo { opacity: 1; filter: grayscale(0); }

/* ========== Parallax banner (fixed background) ========== */
.ibe-about-parallax {
  position: relative;
  height: 420px;
  margin: 0 60px;
  background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=2000&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  .ibe-about-parallax {
    background-attachment: scroll;
    height: 280px;
    margin: 0 20px;
  }
}

/* ========== Story section (Built on Trust) ========== */
.ibe-story {
  background: #FAF5EE;
  padding: 7rem 3rem;
}
.ibe-story__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.ibe-story__title {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: #434142;
  margin: 0;
}
.ibe-story__body p {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #3d3d3d;
  margin: 0 0 0.9rem 0;
  max-width: 560px;
}
.ibe-story__body p:last-child { margin-bottom: 0; }
.ibe-story__closing {
  font-weight: 700 !important;
  color: #434142 !important;
  margin-top: 1.75rem !important;
}

/* ========== Vision / Mission / Features (dark) ========== */
.ibe-vm {
  background: #0a0a0a;
  color: #FAF5EE;
  padding: 7rem 3rem;
}
.ibe-vm__inner { max-width: 1400px; margin: 0 auto; }

.ibe-vm__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 5rem;
}
.ibe-vm__block { max-width: 520px; }
.ibe-vm__heading {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 400;
  font-size: 2.25rem;
  color: #FAF5EE;
  margin: 0 0 1rem 0;
  letter-spacing: 0;
}
.ibe-vm__text {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #c9c6c0;
  margin: 0;
}

.ibe-vm__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}
.ibe-vm__cell {
  min-height: 180px;
  max-width: 320px;
}
.ibe-vm__icon {
  color: #FAF5EE;
  margin-bottom: 1rem;
}
.ibe-vm__feat-title {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: #FAF5EE;
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(250,245,238,0.22);
  letter-spacing: 0;
}
.ibe-vm__feat-text {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 0.82rem;
  line-height: 1.65;
  color: #c9c6c0;
  margin: 0;
}

/* Both image cells share the same fixed background — same image viewed through two windows */
.ibe-vm__cell--img {
  max-width: none;
  min-height: 300px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.ibe-vm__cell--img-a { grid-column: 3; grid-row: 1; }
.ibe-vm__cell--img-b { grid-column: 1; grid-row: 2; }

@media (max-width: 900px) {
  .ibe-vm__cell--img { background-attachment: scroll; }
}

/* ========== Team section ========== */
.ibe-team {
  background: #FAF5EE;
  padding: 6rem 3rem 7rem;
}
.ibe-team__inner { max-width: 1400px; margin: 0 auto; }
.ibe-team__title {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.2;
  color: #434142;
  margin: 0 0 3.5rem 0;
  letter-spacing: 0;
}
.ibe-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2rem;
  align-items: start;
}
.ibe-team__card {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ibe-team__photo {
  width: 100%;
  aspect-ratio: 1 / 1.12;
  background-size: cover;
  background-position: center;
  background-color: #d6d6d6;
  margin-bottom: 0.9rem;
  transition: transform 0.6s var(--ibe-transition);
}
.ibe-team__card:hover .ibe-team__photo { transform: scale(1.02); }
.ibe-team__name {
  display: block;
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: #434142;
  line-height: 1.4;
}
.ibe-team__role {
  display: block;
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 400;
  font-size: 0.82rem;
  color: #6b6b6b;
  line-height: 1.4;
  margin-top: 2px;
}
.ibe-team__note {
  font-family: 'Zalando Sans Expanded', sans-serif !important;
  font-size: 1.188rem;
  line-height: 1.6;
  color: #434142;
  margin: 0;
  padding: 1rem 0;
  max-width: 220px;
  align-self: center;
}

/* ========== Services auto-carousel ========== */
.ibe-services {
  background: #FAF5EE;
  padding: 5rem 0 7rem;
  overflow: hidden;
}
.ibe-services__marquee {
  width: 100%;
  overflow: hidden;
}
.ibe-services__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  padding: 0 3rem;
  animation: ibeServices 50s linear infinite;
}
.ibe-services:hover .ibe-services__track { animation-play-state: paused; }
@keyframes ibeServices {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 1.5rem)); }
}

.ibe-service-card {
  flex: 0 0 auto;
  width: 434px;
  background: transparent;
}
.ibe-service-card__title {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-weight: 400;
  font-size: 37px;
  line-height: 1.1;
  color: #434142;
  margin: 0 0 1.25rem 0;
  letter-spacing: 0;
  min-height: 2.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ibe-service-card__image-link {
  display: block;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ibe-service-card__image {
  width: 434px;
  height: 322px;
  background-size: cover;
  background-position: center;
  background-color: #d6d6d6;
  transition: transform 0.6s var(--ibe-transition);
}
.ibe-service-card:hover .ibe-service-card__image,
.ibe-service-card__image-link:hover .ibe-service-card__image { transform: scale(1.04); }
.ibe-service-card__text {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #3d3d3d;
  margin: 0 0 1.25rem 0;
  min-height: 3em;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .ibe-topnav--light { padding: 1rem 1.25rem; }
  .ibe-clients { padding: 3rem 0 4rem; }
  .ibe-clients__head { margin-bottom: 2rem; }
  .ibe-marquee__item { padding: 0 0.75rem; min-width: 110px; height: 60px; }
  .ibe-story { padding: 4rem 1.5rem; }
  .ibe-story__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .ibe-vm { padding: 4rem 1.5rem; }
  .ibe-vm__head { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
  .ibe-vm__grid { grid-template-columns: 1fr; gap: 2rem; display: flex; flex-direction: column; }
  .ibe-vm__cell--img-a, .ibe-vm__cell--img-b { grid-column: 1; grid-row: auto; min-height: 220px; }
  .ibe-vm__cell--img-a { order: 1; }
  .ibe-vm__grid > .ibe-vm__cell:not(.ibe-vm__cell--img) { order: 2; }
  .ibe-vm__cell--img-b { order: 3; }
  .ibe-team { padding: 3rem 1.5rem 4rem; }
  .ibe-team__title { margin-bottom: 2rem; }
  .ibe-team__grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 1.5rem;
  }
  .ibe-team__card { max-width: 320px; width: 100%; margin: 0 auto; }
  .ibe-team__note { max-width: none; padding: 0.25rem 0; text-align: center; }
  .ibe-services { padding: 3rem 0 4rem; }
  .ibe-services__marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ibe-services__marquee::-webkit-scrollbar { display: none; }
  .ibe-services__track {
    animation: none;
    gap: 2rem;
    padding: 0 1.5rem;
    width: max-content;
  }
  .ibe-services__track > .ibe-service-card { scroll-snap-align: center; }
  .ibe-service-card { width: 300px; }
  .ibe-service-card__title { font-size: 1.5rem; }
  .ibe-service-card__image { width: 100%; height: auto; aspect-ratio: 434/322; }
  .ibe-logo-placeholder { font-size: 0.95rem; }
}

/* ========== RTL ========== */
/* Force physical LTR layout on marquees so overflow origin and translateX work correctly.
   Without this, dir="rtl" shifts the overflow viewport to the right edge of the track,
   making the carousel start "empty" and animate in the wrong direction. */
[dir="rtl"] .ibe-marquee,
[dir="rtl"] .ibe-services__marquee {
  direction: ltr;
}
[dir="rtl"] .ibe-marquee__track {
  animation-direction: normal; /* was: reverse — caused empty start + wrong direction */
}