/* ============================================
   BRANDXB — COMPREHENSIVE FIXES v3
   ============================================ */

/* 1. CONNEXT COLOR — #3DDACA everywhere */
:root {
  --color-connext:       #3DDACA !important;
  --color-connext-light: #3DDACA !important;
  --color-connext-dim:   rgba(61,218,202,0.10) !important;
}
.orb--connext { background: radial-gradient(ellipse at center, rgba(61,218,202,0.35) 0%, transparent 70%) !important; }
.cx-hero__bg { background: radial-gradient(ellipse 70% 60% at 70% 30%, rgba(61,218,202,0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(201,168,76,0.04) 0%, transparent 60%) !important; }
.tag--connext { background: rgba(61,218,202,0.10) !important; color: #3DDACA !important; border-color: rgba(61,218,202,0.25) !important; }
.nav__mega-card--connext { background: rgba(61,218,202,0.04) !important; }
.nav__mega-card--connext::after { background: #3DDACA !important; }
.nav__mega-card--connext:hover { background: rgba(61,218,202,0.09) !important; }
.nav__mega-card--connext .nav__mega-tagline { color: rgba(61,218,202,0.85) !important; }
.nav__mega-card--connext .nav__mega-cta { color: #3DDACA !important; }
.footer__sub-brand-badge--connext { color: #3DDACA !important; border-color: rgba(61,218,202,0.3) !important; }
.footer__sub-brand-badge--connext:hover { background: rgba(61,218,202,0.1) !important; border-color: #3DDACA !important; }
.label--connext { color: #3DDACA !important; }
.btn--connext { color: #0b0b0b !important; background: #3DDACA !important; }
.btn--connext:hover { box-shadow: 0 8px 32px rgba(61,218,202,0.35) !important; }

/* 2. HERO CARDS */
.hero__card { padding: var(--space-6) var(--space-7) !important; }
.hero__card--main { border-color: rgba(201,168,76,0.25) !important; background: linear-gradient(135deg, var(--color-surface) 0%, rgba(201,168,76,0.05) 100%) !important; }
.hero__card--food { border-color: rgba(232,98,42,0.25) !important; background: linear-gradient(135deg, var(--color-surface) 0%, rgba(232,98,42,0.05) 100%) !important; }
.hero__card--connext { border-color: rgba(61,218,202,0.25) !important; background: linear-gradient(135deg, var(--color-surface) 0%, rgba(61,218,202,0.05) 100%) !important; }
.hero__card-label { margin-bottom: var(--space-3) !important; }
.hero__card-metric { margin-bottom: var(--space-4) !important; }
.hero__card-brand { gap: var(--space-3) !important; align-items: center !important; display: flex !important; }

/* 3. FAQ */
.faq-item { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-2xl) !important; overflow: hidden !important; }
.faq-item.open { border-color: rgba(201,168,76,0.35) !important; }
.faq-item__q { padding: var(--space-6) var(--space-8) !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--space-4) !important; text-align: left !important; font-size: var(--text-base) !important; font-weight: 600 !important; color: var(--color-white) !important; background: none !important; border: none !important; cursor: pointer !important; font-family: var(--font-sans) !important; }
.faq-item__a { padding: 0 var(--space-8) !important; font-size: var(--text-sm) !important; color: var(--color-text-muted) !important; line-height: 1.75 !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.4s ease, padding 0.2s ease !important; }
.faq-item.open .faq-item__a { max-height: 600px !important; padding: 0 var(--space-8) var(--space-7) !important; }
.faq-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--space-4) !important; margin-top: var(--space-8) !important; }
@media (max-width: 1024px) { .faq-grid { grid-template-columns: 1fr !important; } }

/* 4. WORK PROJECT CARDS */
.project-card { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-2xl) !important; overflow: hidden !important; }
.project-card__info { padding: var(--space-7) var(--space-8) !important; }
.project-card__info h3 { font-size: var(--text-lg) !important; font-weight: 700 !important; color: var(--color-white) !important; margin-bottom: var(--space-2) !important; }
.project-card__info p { font-size: var(--text-sm) !important; color: var(--color-text-muted) !important; line-height: 1.65 !important; }
.project-card__tags { display: flex !important; flex-wrap: wrap !important; gap: var(--space-2) !important; margin-bottom: var(--space-4) !important; }
.project-card__logo { margin-bottom: var(--space-4) !important; display: block !important; }
.project-card__logo img { height: 28px !important; width: auto !important; object-fit: contain !important; }

/* 5. UAE CARDS */
.uae-card { padding: var(--space-8) !important; background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-2xl) !important; }
.uae-card__icon { font-size: 2rem !important; margin-bottom: var(--space-5) !important; display: block !important; }
.uae-card h3 { font-size: var(--text-lg) !important; font-weight: 700 !important; color: var(--color-white) !important; margin-bottom: var(--space-3) !important; }
.uae-card p { font-size: var(--text-sm) !important; color: var(--color-text-muted) !important; line-height: 1.7 !important; }

/* 6. SERVICE CARDS */
.service-card { padding: var(--space-8) !important; }
.sub-brand-cta { padding: var(--space-10) var(--space-8) !important; border-radius: var(--radius-2xl) !important; border: 1px solid var(--color-border) !important; display: block !important; text-decoration: none !important; transition: border-color 0.2s ease, transform 0.2s ease !important; }
.sub-brand-cta--food:hover { border-color: rgba(232,98,42,0.4) !important; transform: translateY(-3px) !important; }
.sub-brand-cta--connext:hover { border-color: rgba(61,218,202,0.4) !important; transform: translateY(-3px) !important; }

/* 7. PILLAR CARDS */
.pillar-card { padding: var(--space-8) !important; }

/* 8. STATS ROW */
.fx-hero__stats, .cx-hero__stats { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: var(--space-6) !important; overflow-x: auto !important; scrollbar-width: none !important; }
.fx-hero__stats::-webkit-scrollbar, .cx-hero__stats::-webkit-scrollbar { display: none !important; }
.fx-stat, .cx-stat { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; }
.fx-stat-divider, .cx-stat-divider { flex-shrink: 0 !important; width: 1px !important; height: 40px !important; background: var(--color-border) !important; }

/* 9. OTHER CARDS */
.testimonial-card { padding: var(--space-8) !important; }
.job-card { padding: var(--space-8) !important; }
.mv-card { padding: var(--space-10) var(--space-8) !important; }
.pricing-card { padding: var(--space-10) var(--space-8) !important; }
.contact-form-wrap, .contact-info-card { padding: var(--space-10) var(--space-8) !important; }
.about-number-card { padding: var(--space-8) !important; }
.eco-card { padding: var(--space-8) var(--space-10) !important; }
.fx-service-card, .cx-service-card, .cx-event-card, .fx-service-block, .cx-result-card, .cx-process__step, .fx-process__step { padding: var(--space-8) !important; }
.cta-block { padding: var(--space-24) var(--space-12) !important; border-radius: var(--radius-3xl) !important; }
@media (max-width: 768px) { .cta-block { padding: var(--space-16) var(--space-8) !important; } }

/* Mobile nav z-index managed in main.css only */

/* scroll-top-btn styles managed inline in footer.php */


/* Team grid — 5 people responsive */
@media (max-width: 1100px) {
  .team-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .team-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .team-grid--5 { grid-template-columns: 1fr 1fr; }
}

/* ── foodxb service card photo icons ─────────────── */
.fx-service-card__icon--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-5);
  background: var(--color-surface-2);
}

.fx-service-card__icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.fx-service-card:hover .fx-service-card__icon--photo img {
  transform: scale(1.04);
}

/* ── foodxb work card images ─────────────────────── */
.fx-work-card__image {
  width: 100%;
  overflow: hidden;
  /* NOT position:absolute — content div must show below */
}

.fx-work-card__image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.55s ease;
}

.fx-work-card--large .fx-work-card__image img {
  height: 340px;
}

.fx-work-card:hover .fx-work-card__image img {
  transform: scale(1.05);
}

/* ── connext service card photo visuals ──────────── */
.cx-service-card__visual--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-5);
  background: var(--color-surface-2);
  display: block;
  font-size: 0;
}

.cx-service-card__visual--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.cx-service-card:hover .cx-service-card__visual--photo img {
  transform: scale(1.04);
}

/* ── connext work card bg images ─────────────────── */
.cx-work-card__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cx-work-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

.cx-work-card:hover .cx-work-card__bg img {
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════
   PHOTO ICON REPLACEMENTS
   About MV cards, Services hero cards, Careers pillar cards,
   Connext service card visual fixes
   ═══════════════════════════════════════════════════ */

/* ── About: Mission / Vision / Values ────────────── */
.mv-card__icon--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: var(--color-surface-2);
}

.mv-card__icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.mv-card:hover .mv-card__icon--photo img {
  transform: scale(1.04);
}

/* ── Services: Strategy / Creative / Digital ──────── */
.services-hero-card__icon--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: var(--color-surface-2);
}

.services-hero-card__icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.services-hero-card:hover .services-hero-card__icon--photo img {
  transform: scale(1.04);
}

/* ── Careers: Fast Growth / Real Impact / Great Culture */
.pillar-card__icon--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: var(--color-surface-2);
  /* Reset inline style overrides */
  font-size: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.pillar-card__icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.pillar-card:hover .pillar-card__icon--photo img {
  transform: scale(1.04);
}

/* ── Connext service card: photo same style as foodxb ─ */
.cx-service-card__visual--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-2);
  display: block;
  border-bottom: 1px solid var(--color-border);
  padding: 0 !important;
  font-size: 0 !important;
}

.cx-service-card__visual--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.cx-service-card:hover .cx-service-card__visual--photo img {
  transform: scale(1.04);
}


/* ═══════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   All pages — single column stacking on small screens
   ═══════════════════════════════════════════════════ */

/* ── Services page: 3 hero cards → 1 column on mobile ── */
@media (max-width: 768px) {
  .services-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .services-hero-card {
    text-align: left !important;
  }
  .services-hero-card__icon--photo {
    aspect-ratio: 16 / 7 !important;
  }
}

/* ── About: MV grid, team grid ─────────────────────── */
@media (max-width: 768px) {
  .mv-grid { grid-template-columns: 1fr !important; }
  .team-grid--5 { grid-template-columns: 1fr 1fr !important; }
  .eco-grid { grid-template-columns: 1fr !important; }
  .service-detail { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .service-detail--reverse { direction: ltr !important; }
}

/* ── Careers: pillar cards ──────────────────────────── */
@media (max-width: 768px) {
  .pillar-grid { grid-template-columns: 1fr !important; }
  .pillar-card__icon--photo { aspect-ratio: 16 / 7 !important; }
}

/* ── Home: sub-brand cards ──────────────────────────── */
@media (max-width: 768px) {
  .sub-brands__grid { grid-template-columns: 1fr !important; }
  .sub-brand-card__content { padding: var(--space-8) !important; }
}

/* ── Home: services grid ────────────────────────────── */
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr !important; }
}

/* wk-card mobile handled in work-new.css */

/* ── foodxb page: services + work ──────────────────── */
@media (max-width: 768px) {
  .fx-services-grid { grid-template-columns: 1fr !important; }
  .fx-work-grid { grid-template-columns: 1fr !important; }
  .fx-service-card__icon--photo { aspect-ratio: 16 / 7 !important; }
}

/* ── connext page: services + work ─────────────────── */
@media (max-width: 768px) {
  .cx-service-grid { grid-template-columns: 1fr !important; }
  .cx-work-grid { grid-template-columns: 1fr !important; }
  .cx-service-card__visual--photo { aspect-ratio: 16 / 7 !important; }
}

/* ── Contact page ───────────────────────────────────── */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-form-wrap, .contact-info-card {
    padding: var(--space-7) var(--space-5) !important;
  }
}

/* ── Pricing grid ───────────────────────────────────── */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-card--featured { transform: none !important; }
}

/* ── FAQ grid ───────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-grid { grid-template-columns: 1fr !important; }
}

/* ── Stats bar ──────────────────────────────────────── */
@media (max-width: 480px) {
  .stats-bar__grid { grid-template-columns: 1fr 1fr !important; }
  .hw-stats { flex-wrap: wrap !important; gap: var(--space-5) !important; }
  .hw-stat__div { display: none !important; }
}

/* ── Global text alignment on mobile ───────────────── */
@media (max-width: 480px) {
  .display-xl, .display-lg, .display-md {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
  }
  .container {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }
  .section {
    padding-top: var(--space-16) !important;
    padding-bottom: var(--space-16) !important;
  }
}

/* ── Nav actions hide CTA on very small screens ─────── */
@media (max-width: 380px) {
  .nav__actions { display: none !important; }
}

/* ── sub-brand-cta-grid (foodxb + connext on services page) ── */
.sub-brand-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .sub-brand-cta-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── services-hero-grid: Strategy/Creative/Digital ─────────── */
/* Always 3 cols on desktop, 1 col on mobile */
.services-hero-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 700px) {
  .services-hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
  .services-hero-card {
    text-align: left !important;
  }
}

/* ═══════════════════════════════════════════════════
   STAFF / FULL TEAM SECTION
   ═══════════════════════════════════════════════════ */

.staff-section { padding-top: var(--space-24); padding-bottom: var(--space-24); }

/* ── Division divider ─────────────────────────────── */
.staff-division {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin-top: var(--space-20);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  width: 100%;
}

.staff-division:first-of-type { margin-top: 0; }

.staff-division__bar {
  width: 48px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: var(--space-2);
  margin-left: auto;
  margin-right: auto;
}

/* Division name — large, bold */
.staff-division__label {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  width: 100%;
}

/* Subtitle — small, light */
.staff-division__title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.01em;
  text-align: center;
  width: 100%;
}

.staff-division__sub { display: none; }

/* ══ UNIFIED TEAM GRID ══
   All grids use flexbox so cards are always centered
   regardless of how many people are in a row.
   Card width is fixed so all cards are identical size. */

.team-grid--4,
.team-grid--3r,
.team-grid--2c,
.team-grid--creative {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

/* Fixed card width = exactly 1/4 of container minus gaps */
.team-grid--4 .team-card,
.team-grid--3r .team-card,
.team-grid--2c .team-card,
.team-grid--creative .team-card {
  flex: 0 0 calc(25% - var(--space-5) * 3 / 4);
  width: calc(25% - var(--space-5) * 3 / 4);
  max-width: calc(25% - var(--space-5) * 3 / 4);
  box-sizing: border-box;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
  .team-grid--4 .team-card,
  .team-grid--3r .team-card,
  .team-grid--2c .team-card,
  .team-grid--creative .team-card {
    flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3);
    width: calc(33.333% - var(--space-5) * 2 / 3);
    max-width: calc(33.333% - var(--space-5) * 2 / 3);
  }
}

@media (max-width: 768px) {
  .team-grid--4 .team-card,
  .team-grid--3r .team-card,
  .team-grid--2c .team-card,
  .team-grid--creative .team-card {
    flex: 0 0 calc(50% - var(--space-5) / 2);
    width: calc(50% - var(--space-5) / 2);
    max-width: calc(50% - var(--space-5) / 2);
  }
  .staff-division { margin-top: var(--space-14); margin-bottom: var(--space-7); }
}

@media (max-width: 480px) {
  .team-grid--4 .team-card,
  .team-grid--3r .team-card,
  .team-grid--2c .team-card,
  .team-grid--creative .team-card {
    flex: 0 0 calc(50% - var(--space-5) / 2);
    width: calc(50% - var(--space-5) / 2);
    max-width: calc(50% - var(--space-5) / 2);
  }
}

/* ── Team cards: center alignment ── */
.team-card {
  text-align: center !important;
}

.team-card__avatar {
  margin: 0 auto;
}

.team-card h4,
.team-card span {
  text-align: center !important;
  display: block !important;
}


/* ── Testimonials: 4 cards responsive ─────────── */
@media (max-width: 1024px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .testimonials-grid { grid-template-columns: 1fr !important; }
}