/* ==========================================================================
   Sectors page — sector image accordion
   A row of panels that expand (on hover, or tap on touch) with smooth movement.
   Square corners, light-weight labels, brand-blue tint that lifts on expand.
   ========================================================================== */
.sector-cards { background: var(--white); padding-block: 72px; }
.sector-group-title { margin: 0 0 22px; }
.sector-group-title:not(:first-child) { margin-top: 44px; }

.sector-accordion {
  display: flex;
  gap: 8px;
  height: 460px;
}
.acc-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  isolation: isolate;
  transition: flex .55s cubic-bezier(.4, 0, .2, 1);
  /* square corners — no border-radius */
}
.acc-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .6s ease;
}
/* brand-blue tint that lifts as the panel opens */
.acc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8,33,62,.94) 0%, rgba(8,33,62,.68) 60%, rgba(8,33,62,.48) 100%);
  transition: opacity .45s ease;
}
.acc-panel:hover,
.acc-panel.is-open { flex: 3; }
.acc-panel:hover::before,
.acc-panel.is-open::before { opacity: .3; }
.acc-panel:hover img,
.acc-panel.is-open img { transform: scale(1.05); }

.acc-label {
  position: relative;
  padding: 22px;
  color: #fff;
  font-size: 18px;
  font-weight: 300;          /* lighter weight */
  line-height: 1.3;
}
.acc-label::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 12px;
  background: #fff;
  transition: width .45s ease;
}
.acc-panel:hover .acc-label::after,
.acc-panel.is-open .acc-label::after { width: 60px; }

/* ---------- Responsive: stack the panels on small screens (no accordion) ---------- */
@media (max-width: 760px) {
  .sector-accordion { flex-direction: column; height: auto; gap: 10px; }
  .acc-panel { flex: none; height: 150px; }
  .acc-panel:hover, .acc-panel.is-open { flex: none; }
  .acc-panel:hover img, .acc-panel.is-open img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-panel, .acc-panel img, .acc-panel::before, .acc-label::after { transition: none; }
}