/* =============================================
   WILLBERG SUBSIDIARIES — Brand Colors
   Amber/gold — parent group identity
   ============================================= */
:root {
  --amber:      #e8a020;
  --amber-dark: #c4841a;
  --amber-glow: rgba(232,160,32,0.12);
  --border:     rgba(232,160,32,0.18);
}

/* Reverse grid: image on left, text on right */
.about__grid--reverse {
  direction: ltr;
}
@media (min-width: 769px) {
  .about__grid--reverse {
    grid-template-columns: 1fr 1fr;
  }
  .about__grid--reverse .about__visual {
    order: -1;
  }
}

/* =============================================
   MOBILE OPTIMISATION
   ============================================= */
@media (max-width: 768px) {
  .page-header { padding: 6rem 0 2.5rem; }
  .about__grid,
  .about__grid--reverse {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 2rem;
  }
  .about__grid--reverse .about__visual { order: 0; }
  .about__img-main { aspect-ratio: 16/9 !important; }
  /* gap between subsidiary sections */
  .section--dark > .container > div[style*="gap:6rem"] { gap: 3.5rem !important; }
  .cta-band { padding: 3rem 0; }
  .cta-band__inner { flex-direction: column; text-align: center; gap: 1.5rem; }
  .cta-band__inner > div:last-child { width: 100%; }
  .cta-band__inner .btn { width: 100%; justify-content: center; }
  .section { padding: 3.5rem 0; }
}
/* =============================================
   MOTION ADDITIONS — SUBSIDIARIES
   ============================================= */
.page-header__content {
  animation: fadeUp 0.75s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}
/* Sub-section images hover */
.about__img-main {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  box-sizing: border-box;
}
.about__img-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.about__img-main:hover img { transform: scale(1.04); }

.linkedin-btn{
  background: #0077B5;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

/* =============================================
   SUBSIDIARY DESCRIPTION FLOATER ICONS
   ============================================= */
.pillar-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--grey);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  list-style: none;
  padding: 0;
}
.pillar-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pillar-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: var(--amber-glow);
  border: 1px solid var(--border);
  color: var(--amber);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.pillar-list li:hover .pillar-list__icon {
  animation: floatPillarIcon 0.9s ease-in-out;
  background: var(--amber);
  color: var(--navy);
  border-color: var(--amber);
}
@keyframes floatPillarIcon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-5px) rotate(5deg); }
}

/* Brand-specific colours per subsidiary block */
.about__grid--transport .pillar-list__icon {
  background: rgba(245,196,0,0.12);
  border-color: rgba(245,196,0,0.25);
  color: #F5C400;
}
.about__grid--transport li:hover .pillar-list__icon { background: #F5C400; }

.about__grid--freight .pillar-list__icon {
  background: rgba(232,72,32,0.12);
  border-color: rgba(232,72,32,0.25);
  color: #E84820;
}
.about__grid--freight li:hover .pillar-list__icon { background: #E84820; color: #fff; }

.about__grid--ghana .pillar-list__icon {
  background: rgba(0,200,192,0.12);
  border-color: rgba(0,200,192,0.25);
  color: #00C8C0;
}
.about__grid--ghana li:hover .pillar-list__icon { background: #00C8C0; }
/* =============================================
   NAVBAR — navy background only
   ============================================= */
.nav {
  background: var(--navy);
}
.nav.scrolled {
  background: var(--navy);
}