/* Tabs — every panel is in the markup; JavaScript only hides the inactive
   ones, so the content is there with scripting off. */

.tabs__list{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid var(--line)}
.tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:14px 22px;margin-bottom:-2px;border-bottom:3px solid transparent;
  font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);transition:color .15s ease,border-color .15s ease}
.tabs__tab:hover{color:var(--asphalt)}
.tabs__tab[aria-selected="true"]{color:var(--asphalt);border-bottom-color:var(--red)}
.tabs__tab:focus-visible{outline:3px solid var(--red);outline-offset:-3px}

.tabs__panel{padding-top:34px}
.tabs__panel[hidden]{display:none}
.tabs__panel--split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.tabs__media{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,#2B2F37,#1A1D23)}
.tabs__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Without JavaScript every panel shows, so each needs its own visible label. */
.tabs:not([data-tabs-ready]) .tabs__panel{border-top:1px solid var(--line);margin-top:20px}

.section--bg-navy .tabs__list,.section--bg-asphalt .tabs__list{border-color:rgba(255,255,255,.18)}
.section--bg-navy .tabs__tab,.section--bg-asphalt .tabs__tab{color:rgba(255,255,255,.6)}
.section--bg-navy .tabs__tab:hover,.section--bg-asphalt .tabs__tab:hover,
.section--bg-navy .tabs__tab[aria-selected="true"],
.section--bg-asphalt .tabs__tab[aria-selected="true"]{color:#fff}

@media(max-width:1020px){.tabs__panel--split{grid-template-columns:1fr;gap:28px}}
@media(max-width:720px){.tabs__tab{padding:12px 16px;font-size:16px}}