/* ═══════════════════════════════════════
   ABOUT PAGE — SECTORS WE SERVE (section5)
═══════════════════════════════════════ */

.sectors {
  --pill: #ece9e3;
  --muted: #9a958c;
  position: relative;
  background: var(--bg-primary);
  z-index: 2;
}
.sectors-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(74px, 11vh, 134px) clamp(20px, 4vw, 56px);
}
.sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

/* ── Left copy ── */
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-subtle);
  padding: 8px 16px 8px 11px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary-60);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px -10px rgba(15, 37, 67, 0.4);
  margin-bottom: 26px;
}
.sec-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hero-green); }
.sec-eyebrow b { color: var(--text-primary); font-weight: 700; }

.sec-copy h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.sec-copy h2 .muted { color: var(--muted); }

.sec-lead {
  margin-top: 26px;
  max-width: 480px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-primary-60);
}

.sec-learn {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--text-primary);
  background: var(--pill);
  border: 1px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.sec-learn:hover {
  transform: translateY(-3px);
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(255, 77, 109, 0.55);
}
.sec-learn svg { transition: transform 0.3s ease; }
.sec-learn:hover svg { transform: translateX(4px); }

/* ── Right picker ── */
.sec-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-item {
  position: relative;
  height: 48px;
  border-radius: 14px;
  background: var(--pill);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 22px;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.6s ease, box-shadow 0.6s ease;
}
.sec-item .face {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  transition: opacity 0.4s ease, transform 0.5s ease;
}
.sec-item .idx {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  width: 24px;
  flex: none;
}
.sec-item .name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-primary-60);
  transition: color 0.4s ease;
}
.sec-item .ic { display: none; }

/* active = expanded gradient card */
.sec-item.active {
  height: 200px;
  background: var(--brand-gradient);
  box-shadow: 0 26px 54px -22px rgba(255, 77, 109, 0.6);
}
.sec-item.active .face { justify-content: center; gap: 14px; }
.sec-item.active .idx { display: none; }
.sec-item.active .name {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 27px;
}
.sec-item.active .ic { display: inline-grid; place-items: center; color: #fff; }

/* ── RTL ── */
body.rtl .sec-copy { text-align: right; }
body.rtl .sec-eyebrow { flex-direction: row-reverse; }
body.rtl .sec-learn svg { transform: scaleX(-1); }
body.rtl .sec-item { padding: 0 22px; }

/* ── Responsive ── */
@media (max-width: 880px) {
  .sec-grid { grid-template-columns: 1fr; gap: 48px; }
  .sec-copy h2 { font-size: clamp(38px, 11vw, 58px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}